js中轮播图

//js部分

<style type="text/css">

   #a{
    width: 30%;
    height: 500px;
    border: 0px solid red;
    margin: auto;
   }
  </style>
  <script type="text/javascript">
   
   var imgs=['../img/t1.jpg','../img/t2.jpg','../img/t3.jpg','../img/t5.jpg'];
   var index=0;
   function next(n){
    var Img=document.getElementById('myimg');
    index+=n;//计算图片索引,index的默认值为0,自增1,当n大于0时表示下一张
    if(index>=imgs.length){//如果进入if表示图片到达最后一张又点击了下一张
     index=0;//设置索引值为0,显示第一张
    }else if(index<0){//表示图片已达到第一张,又点击了一下上一张
     index=imgs.length-1;//设置索引长度为数组减一
    }
    Img.src=imgs[index];
    
   }
   </script>
   <script type="text/javascript">
    var inter=window.setInterval("next(1)",2000);
   function stop(){
    window.clearInterval(inter);
   }
   function start(){
     inter=window.setInterval("next(1)",2000);
   }
   
   </script>

猜你喜欢

转载自www.cnblogs.com/qq1561942060/p/12900708.html