原生js仿网易云轮播特效

原理：运用两张图片切换 可视区域向左走或向右走 要跳转的图片定位在可视区域的左边或右边 然后用缓动动画实现切换 重点：缓动动画

js实现步骤：1、获取所需元素
2、创建指示器
3.让第一个选中
4.添加事件
5、切换索引
6、自动轮播

1、获取所需元素

 var slider=$("slider");
        var slider_main=$("slider_main");
        var slider_main_img=slider_main.children;
        var slider_ctl=slider.children[1];
        var iNow=0,timer=null;

2、创建指示器

 for(var i=0;i

3.让第一个选中

 slider_ctl.children[1].className="slider-ctl-icon current";

      var slider_ctl_child=slider_ctl.children;
      var slider_width=slider.offsetWidth;
    //让第一张图片显示在可视区域
    for(var j=1;j

4.添加事件

  for(var i=0;i 选中的, 相当于点击了右边的按钮
                 2.点击的 < 选中的, 相当于点击了左边的按钮
                */
                var index= parseInt(this.innerText);
                if(index>iNow){
                    buffer( slider_main_img[iNow],{left:-slider_width});
                    slider_main_img[index].style.left=slider_width+"px";

                }else{
                    buffer( slider_main_img[iNow],{left:slider_width});
                    slider_main_img[index].style.left=-slider_width+"px";
                }
//注意点 
                  iNow=index;
                  buffer(slider_main_img[iNow],{left:0});
              }
              changIndex();
          }
      }

5、切换索引

 function changIndex() {
        for(var i=1;i

6、自动轮播

function autoPlay() {
        buffer( slider_main_img[iNow],{left:-slider_width});
        iNow++;
        if(iNow>slider_main_img.length-1){
            iNow=0;
        }
        slider_main_img[iNow].style.left=slider_width+"px";
        buffer(slider_main_img[iNow],{left:0});
        changIndex();
    }
    clearInterval(timer);
    timer=setInterval(autoPlay,2000);

    slider.onmouseover=function () {
        clearInterval(timer);
    };
    slider.onmouseout=function () {
        timer=setInterval(autoPlay,1500);
    };

考察点:缓动动画运用 无缝滚动原理 点击不通过其它图片 直接切换