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

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

原生js仿网易云轮播特效

猜你喜欢