原生js仿网易云轮播特效

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

仿网易云轮播.gif

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<slider_main_img.length;i++){
            var span=document.createElement("span");
            span.className="slider-ctl-icon";
            span.innerText=slider_main_img.length-i-1;
            slider_ctl.insertBefore(span,slider_ctl.children[1]);
        }

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<slider_main_img.length;j++){
        slider_main_img[j].style.left=slider_width+"px";
    }

4.添加事件

  for(var i=0;i<slider_ctl_child.length;i++){
          slider_ctl_child[i].onmousedown=function () {
              if(this.className=="slider-ctl-prev"){//左边
                  /*
                    1.当前可视区域的图片快速右移;
                    2.上一张图片快速出现在可视区域的左边
                    3.让这张图片做动画进入
                   */

                  buffer( slider_main_img[iNow],{left:slider_width});
                  iNow--;
                  if(iNow<0){
                      iNow=slider_main_img.length-1;
                  }
                  slider_main_img[iNow].style.left=-slider_width+"px";
                  buffer(slider_main_img[iNow],{left:0});
              }else if(this.className=="slider-ctl-next"){//右边
                  /*
                  1.当前可视区域的图片快速左移;
                  2.上一张图片快速出现在可视区域的右边
                  3.让这张图片做动画进入
                 */
                 autoPlay();
              }else {//下边
                  /*
                 1.用当前点击的索引和选中索引对比
                 2.点击的 > 选中的, 相当于点击了右边的按钮
                 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<slider_ctl_child.length-1;i++){
            slider_ctl_child[i].className="slider-ctl-icon";
        }
        slider_ctl_child[iNow+1].className="slider-ctl-icon current";
    }

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);
    };

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