直接開始，HTML CSS部分沒備註，JS有

HTML部分

<div style="overflow: hidden;position: relative;left: 0;top: 0;height: 450px;width: 100%">
    <div id="slider">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

css部分

  #slider {
    width: 300%;
    height: 450px;
    position: absolute;
    overflow: hidden;
  }
  #slider > div:nth-child(1) {
    #sliderModal('http://yxcx.oss-cn-beijing.aliyuncs.com/yxcximg/banner/allline2.jpg');
  }
  #slider > div:nth-child(2) {
    #sliderModal('http://yxcx.oss-cn-beijing.aliyuncs.com/yxcximg/banner/html1.jpg');
  }
  #slider > div:nth-child(3) {
    #sliderModal('http://yxcx.oss-cn-beijing.aliyuncs.com/yxcximg/banner/yizhanshi1.jpg');
  }
 

JS部分 

    var speed = 15;    //設定圖片切換速度
    var page = 1;      //輪播圖片
    var allPage = $('#slider').children('div').length;   //獲取輪播圖片數
    var clientWidth = $(window).width();      //獲取瀏覽器顯示寬度
    function Mixin() {                      //所有方法封裝方便呼叫
        this.play = function (){              //總開關
            setInterval(function () {           //2秒換一張圖
                run.autoPlay();
            }, 2000)
        };
        this.animate = function (val) {
            clearInterval(play);              //先清除動畫
            if(val ==0){                          //回到第一張圖
                $('#slider').css({'left': 0 + 'px'})
            }else {
                var move = (val -1) * -clientWidth;     //運動軌跡開始值
                var end = val * -clientWidth;           //運動軌跡結束值
                var play = setInterval(function () {    //這給setInterval定義了個名字，好隨時停止它
                    move = move -speed                  //動畫移動速度
                    $('#slider').css({'left': move || 0 + 'px'})     //開始移動
                    if (move < end) {                                 //當移動值超過結束值 停止動畫
                        clearInterval(play);
                    }
                }, 5)
            }
        }
        this.autoPlay = function () {
            if(page >=allPage){                 //超過總圖數回到第一張圖
                page =0;
            }
            this.animate(page);                //插圖圖幾，開始動畫
            page ++;
        };
    };
    var createslider = function () {            //這樣寫可以不寫'new'來呼叫建構函式，傳值也方便
        return new Mixin();
    };
    var run = createslider();                  //把函式賦值給RUN才能成功呼叫play,因為createslider指向本身，
                                                // 而run的constructor指向mixin這個方法，可以用run.__proto__檢測
    run.play();
    console.log(run.__proto__)