原理：運用兩張圖片切換 可視區域向左走或向右走 要跳轉的圖片定位在可視區域的左邊或右邊 然後用緩動動畫實現切換 重點：緩動動畫

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

考察點:緩動動畫運用 無縫滾動原理 點選不通過其它圖片 直接切換