使用js实现图片的自动切换

最新推荐文章于 2023-11-01 22:49:30 发布

pqx1993

最新推荐文章于 2023-11-01 22:49:30 发布

阅读量4.4k

点赞数 1

本文链接：https://blog.csdn.net/pqx1993/article/details/8628679

版权

<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0;border:0;padding:0}
#main{width:450px;height:400;background-color:green;margin:auto}
#head{height:350px;background-color:blue}
#head img{width:440px;height:340px;padding-left:5px;padding-top:5px}
#content li{float:left;list-style:none;width:35px;height:30px;text-align:center;line-height:30px;margin-right:5px;border:1px

solid orange}
#content ul{width:360px;margin:auto;margin-top:5px}
</style>
<script>
var count = 1;
var interId="";
  function changeColor(){
   //定义一个计数器

   var img = document.getElementById("img");
   if(count==8)
   {count=0;}
   var k=++count;
   img.src = k+'.jpg';
  for(var i=1;i<=8;i++)
  {
            document.getElementById('tab'+i).style.backgroundColor='';
  }
  document.getElementById('tab'+k).style.backgroundColor='#99CC00';

  }
  function start_change()
  {
   interId=setInterval("changeColor()",1000);
  }
function stop_change()
{
clearInterval(interId);
}
function showPic(n)
{
//清空定时器
stop_change();
document.getElementById("img").src = n+".jpg";
for(var i=1;i<=8;i++)
{
document.getElementById('tab'+i).style.backgroundColor='';
}
document.getElementById('tab'+n).style.backgroundColor='99CC00';
count=n;
}
</script>
</head>