图片切换图片自动切换

时间 2021-07-11

<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
body{margin:50px auto;padding:0;border:0; background-color:#ccffcc;}
#main{width:450px;height:400px;margin:auto}
#head{height:400px;background-color:#ccc}
#head img{width:450px;height:400px;padding-left:5px;padding-right:5px}
#cont li{float:left;list-style:none;width:35px;height:30px;text-align:center;line-height:30px;margin-right:20px;border:1px solid orange}
#cont ul{width:360px;margin:auto;margin-top:5px background-color:#ccc}
</style>
<script>
//先定义一个计数器，统计图片
var count = 1;
//周期函数的返回值
var interval = '';
function changePic(){
var myimg = document.getElementById("show");
if(count == 6){
count = 0;
}
var k = ++count;
myimg.src = "images/0"+k+".jpg";
//图片修改后，序号背景色也要发生变化
//先将所有的序号颜色恢复
for(var i=1;i<=6;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 = "images/0"+n+".jpg";
for(var i=1;i<=8;i++){
document.getElementById("num"+i).style.backgroundColor = '';
}
document.getElementById("num"+n).style.backgroundColor = "yellow";
count = n;
}
</script>
</head>