图片切换图片自动切换（实例）

最新推荐文章于 2020-08-31 17:27:39 发布

郭晓湉

最新推荐文章于 2020-08-31 17:27:39 发布

阅读量1.6k

点赞数

分类专栏： PHP Html

本文链接：https://blog.csdn.net/xtqueen/article/details/8635028

版权

PHP 同时被 2 个专栏收录

120 篇文章 0 订阅

订阅专栏

Html

77 篇文章 0 订阅

订阅专栏

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