源码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.hidden{
display: none;
}
#div1{
position: absolute;
top: 50px;
left: 100px;
}
#div2{
position: absolute;
top: 210px;
left: 510px;
}
a{
display: block;
float: left;
width: 20px;
height: 20px;
background-color: #fff;
color: #000;
margin-right: 2px;
text-align: center;
line-height: 22px;
font-size: 12px;
border: 1px solid #999;
}
</style>
<script type="text/javascript">
var max=4; //总的图片数量
var now=1; //当前显示的图片，默认为第1张
var timer; //定时器
function show(id){
//判断是否传递图片编号
if(id){
now=id;
clearTimeout(timer); //清除原来的计时器
}
for(var i=1;i<=max;i++){
if(i==now){
$("ad"+now).style.display="block"; //显示当前图片
}else{
$("ad"+i).style.display="none"; //其他图片隐藏
}
}
//判断当前图片是否是最后一张，如果是，则从头再来
if(now==max){
now=1;
}else{
now++; //设置显示下一张图片
}
timer=setTimeout(show, 2000); //每2秒切换图片
}
window.onload=function(){
show();
};
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<div id="div1">
<img src="images/ad-01.jpg" id="ad1">
<img src="images/ad-02.jpg" id="ad2" class="hidden">
<img src="images/ad-03.jpg" id="ad3" class="hidden">
<img src="images/ad-04.jpg" id="ad4" class="hidden">
</div>
<div id="div2">
<a onm ouseover="show(1)">1</a>
<a onm ouseover="show(2)">2</a>
<a onm ouseover="show(3)">3</a>
<a onm ouseover="show(4)">4</a>
</div>
</body>
</html>
效果：