原生js轮播特效怎么制作

a{text-decoration:none;color:#3DBBF5;}

   *{

    margin:0;

    padding:0;

   }

   .wrapper{

    width:400px;

    height:300px;

    margin:100pxauto;

   }

   #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:010px;

    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;

   }

     5123451

    <

    >

window.onload=function() {

   varlunBo = document.getElementById("lunbo");

   varlist = document.getElementById("list");

   varbtn = document.getElementById("buttons").getElementsByTagName('span');

   varprev = document.getElementById("prev");

   varnext = document.getElementById('next');

   varinterval = 3000;

   vartimer;

   varindex = 1;

   varanimated =false;

   for(vari=0;i

    btn[i].onclick=function() {

     if(this.className=='on')//如果是状态按钮直接返回节约资源

     {

      return

     };

     varmyIndex =parseInt(this.getAttribute('index'));//获取按钮的index属性值

     varoffset = -400*(myIndex-index);//根据属性值 计算偏移量

     animate(offset) //轮播动画

     index = myIndex;// 改变索引值

     showBtn();  //显示状态按钮

    }

   }

   functionshowBtn () { 

    for(vari=0;i

     btn[i].className='' 

    }

    btn[index-1].className='on'

   }

   prev.onclick=function() {//上一页事件

    if(animated) {//如果是动画状态 直接返回解决bug

     return;

    }

    if(index==1) { 

     index =btn.length;

    }else{

     index-=1;

    }

    animate(400); 

    showBtn();

   }

   next.onclick=function() {

    if(animated) {

     return;

    }

    if(index==btn.length) {

     index =1;

    }else{

     index+=1;

    }

    animate(-400);

    showBtn();

   }

   functionanimate(offset) {

    animated =true;//表示在动画状态

    varnewLeft = parseInt(list.style.left) + offset;//计算新的left值

    vartime = 400;//设置动画总时间

    varinterval = 10;//动画帧时间

    varspeed = offset/(time/interval);//每帧运动距离

    functiongo () { 

     if((speed>0 && 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'

      }elseif( parseInt(list.style.left)>-400){

       list.style.left = -2000 +'px'

      }

     }

    }

    go();

   }

   functionplay () { 

    timer = setTimeout(function() {

     next.onclick();

     play();

    },interval)

   }

   play();

   functionstop () {

    clearTimeout(timer);

   }

   lunBo.onmouseover=stop;

   lunBo.onmouseout=play;

  }