首页 > Web开发 > 详细

js中轮播图

时间:2020-05-16 16:08:56      阅读:45      评论:0      收藏:0      [点我收藏+]

 

//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>

js中轮播图

原文:https://www.cnblogs.com/qq1561942060/p/12900708.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!