<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{padding:0;margin:0;border:0}
#div1{width:300px;height:300px;background:#FF00FF;margin:auto}
#div2{height:250px;background:#9900FF}
#div2 img{width:290px;height:240px;float:right;margin-right:5px;margin-top:5px;}
#div3{width:240px;background:#33FFFF;margin:auto}
#div3 li{list-style:none;float:left;width:25px;height:30px;text-align:center;line-height:30px;margin-right:5px;border:1px solid orange}
#div3 ul{width:250;margin:atuo;margin-top:5px;}
</style>
<script>
//先定义一个计数器,统计图片
var count = 1;
//周期函数的返回值
var interval = '';
function changePic(){
var myimg = document.getElementById("show");
if(count == 7){
count = 0;
}
var k = ++count;
myimg.src = k+".jpg";
//图片修改后,序号背景色也要发生变化
//先将所有的序号颜色恢复
for(var i=1;i<=7;i++){
document.getElementById("num"+i).style.backgroundColor = '';
}
//将当前序号设置背景色
document.getElementById("num"+k).style.backgroundColor = "yellow";
}
//间歇性函数实现图片周期变换
function start_chan(){
interval = setInterval("changePic()",1000);
}
//停止周期函数
function stop_chan(){
clearInterval(interval);
}
function choosePic(n){
stop_chan();
document.getElementById("show").src = n+".jpg";
for(var i=1;i<=7;i++){
document.getElementById("num"+i).style.backgroundColor = '';
}
document.getElementById("num"+n).style.backgroundColor = "yellow";
count = n;
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<img src="1.jpg" id="show" οnmοuseοver="stop_chan()" οnmοuseοut="start_chan()" />
</div>
<div id="div3">
<ul>
<li id="num1" οnmοuseοver="choosePic(1)" οnmοuseοut="start_chan()">1</li>
<li id="num2" οnmοuseοver="choosePic(2)" οnmοuseοut="start_chan()">2</li>
<li id="num3" οnmοuseοver="choosePic(3)" οnmοuseοut="start_chan()">3</li>
<li id="num4" οnmοuseοver="choosePic(4)" οnmοuseοut="start_chan()">4</li>
<li id="num5" οnmοuseοver="choosePic(5)" οnmοuseοut="start_chan()">5</li>
<li id="num6" οnmοuseοver="choosePic(6)" οnmοuseοut="start_chan()">6</li>
<li id="num7" οnmοuseοver="choosePic(7)" οnmοuseοut="start_chan()">7</li>
</ul>
</div>
</div>
</body>
</html>