原生js如何实现轮播特效

这篇文章主要为大家展示了"原生js如何实现轮播特效"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"原生js如何实现轮播特效"这篇文章吧。

首先css代码

a{text-decoration:none;color:#3DBBF5;}   *{    margin: 0;    padding: 0;   }   .wrapper{    width: 400px;    height: 300px;    margin: 100px auto;   }   #lunbo{    position: relative;    overflow: hidden;   }   #list{    position: relative;    white-space: nowrap; // 这块用行元素模拟，所以才用该属性，块元素可修改这块   }   #list span{    display: inline-block;    width: 400px;    height: 300px;    text-align: center;    line-height: 300px;    font-weight: bold;    font-size: 100px;    color: #fff;   }   #buttons{    position: absolute;    bottom: 0;    text-align: center;    width: 100%;    height: 40px;    line-height: 40px;   }   #buttons span{    display: inline-block;    width: 15px;    height: 5px;    background: #fff;    margin: 0 10px;    cursor: pointer;    transition: all .5s;   }   #buttons span.on{    height: 20px;   }   .arrow{    position: absolute;    top: 50%;    transform: translateY(-50%);    font-size: 80px;    font-weight: bold;    color: #fff;    opacity: .3;    transition: all .5s;   }   .wrapper:hover .arrow{    opacity: 1;   }   #prev{    left: 10px;   }   #next{    right: 10px;   }

然后HTML代码

   
    
     5123451    
    
                             
    <    >   
  

最后js代码

_window.onload=function () {   var lunBo = document.getElementById("lunbo");   var list = document.getElementById("list");   var btn = document.getElementById("buttons").getElementsByTagName('span');   var prev = document.getElementById("prev");   var next = document.getElementById('next');   var interval = 3000;   var timer;   var index = 1;   var animated = false;   for (var i=0;i0 && parseInt(list.style.left)newLeft)) { //通过条件判断到它是否还要继续进行动画      list.style.left = parseInt(list.style.left) + speed +'px';      setTimeout(go,interval)      } else{      animated = false; //动画状态结束      list.style.left = newLeft + 'px'; //现在的位移      if (parseInt(list.style.left)<-2000) { // 辅助假图       list.style.left = -400 + 'px';      } else if( parseInt(list.style.left)>-400){       list.style.left = -2000 + 'px';      }     }    }    go();   }   function play () {     timer = setTimeout(function () {     next.onclick();     play();    },interval)   }   play();   function stop () {    clearTimeout(timer);   }   lunBo.onmouseover=stop;   lunBo.onmouseout=play;  }

以上是"原生js如何实现轮播特效"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！