轮播从无到有

1.轮播形式

千奇百怪，常见：透明度、位移

2.代码实现

2.1 透明度

基础代码

html

  <div class="my-slide">
    <ul class="slide-wrapper">
      <li>
        <a href="javascript:"><img src="http://cdn.dowebok.com/144/images/1.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:"><img src="http://cdn.dowebok.com/144/images/2.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:"><img src="http://cdn.dowebok.com/144/images/3.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:"><img src="http://cdn.dowebok.com/144/images/4.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:"><img src="http://cdn.dowebok.com/144/images/5.jpg" alt=""></a>
      </li>
    </ul>
    <a href="javascript:" class="ctrl prev">&lt;</a>
    <a href="javascript:" class="ctrl next">&gt;</a>
    <ul class="ctrl slide-box">
      <li class="current"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

  </div>

View Code

css

* {
      margin: 0;
      padding: 0;
    }

    img {
      border: 0;
    }

    ul,
    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .my-slide {
      position: relative;
      margin: 0 auto;
      width: 1000px;
      height: 320px;
      overflow: hidden;
    }

    /* .slide-wrapper */
    .my-slide .slide-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
    }

    .my-slide .slide-wrapper li{
      opacity: 0;
    }
    .my-slide .slide-wrapper li:nth-child(1) {
      opacity: 1;
    }
    .my-slide .slide-wrapper li,
    .my-slide .slide-wrapper li a,
    .my-slide .slide-wrapper li img{
      position: absolute;      
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;;  
     
    }

    /* btn */
    .my-slide .prev,
    .my-slide .next {
      position: absolute;
      top: 50%;
      z-index: 2;
      width: 35px;
      height: 70px;
      line-height: 70px;
      margin-top: -35px;
      border-radius: 3px;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0.6;
      color: #fff;
      text-align: center;
      background-repeat: no-repeat;
      transition: opacity .2s linear 0s;
    }

    .my-slide a:hover {
      opacity: 1;
    }

    .my-slide .prev {
      left: 5px;
    }

    .my-slide .next {
      right: 5px;
    }


    /* slide-box */
    .my-slide .slide-box {
      position: absolute;
      z-index: 30;
      left: 50%;
      bottom: 12px;      
      margin-left: -60px;
      width: 120px;      
      height: 20px;
      padding: 0 4px;
      text-align: center;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.5);
    }

    .my-slide .slide-box li {
      display: inline-block;
      margin: 4px 2px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #fff;
      cursor: pointer;
    }
    .my-slide .slide-box li.current{
      background-color: #fe6500;
    }

    .my-slide .slide-box li:hover {
      background-color: #fe6500;
    }

View Code

2.1.1 初级实现自动轮播功能

var wrap = $('.my-slide');

    // content
    var content_wrap = wrap.find('.slide-wrapper');
    var content_lis = content_wrap.find('li');

    // bottom box
    var btn_wrap = wrap.find('.slide-box');
    var btn_lis = btn_wrap.find('li');

    // ctrls
    var ctrls = wrap.find('.ctrl');
    var prev = wrap.find('.prev');
    var next = wrap.find('.next');

    // run params
    var timer = null;
    var index = 0;
    var after = 0;

    setInterval(function(){      
      if(index>=content_lis.length){
        index=0;
      }
      content_lis.eq(index).animate({
        opacity:0
      });
      after=index+1>=content_lis.length?0:index+1;
      content_lis.eq(after).animate({
        opacity:1
      });
      index++;
    },500);

View Code

2.1.2 进阶常规功能：左右点击、定点点击、自动轮播

var wrap = $('.my-slide');

    // content
    var content_lis = wrap.find('.slide-wrapper li');

    // bottom box
    var btn_lis = wrap.find('.slide-box li');

    // ctrls
    var ctrls = wrap.find('.ctrl');
    var prev = wrap.find('.prev');
    var next = wrap.find('.next');

    // run params
    var timer = null;
    var index = 0;
    var after = 0;

    var run = function () {
      timer = setInterval(function () {
        after = index + 1 >= content_lis.length ? 0 : index + 1;
        change.call(null, index, after);
        index = after;
      }, 2000);
    };

    run();

    btn_lis.each(function () {
      $(this).click(function () {
        after = $(this).index();
        change.call(null, index, after);
        index = after;
      });
    });

    prev.click(function () {
      after = index - 1 < 0 ? content_lis.length - 1 : index - 1;
      change.call(null, index, after);
      index = after;
    });
    next.click(function () {
      after = index + 1 >= content_lis.length ? 0 : index + 1;
      change.call(null, index, after);
      index = after;
    });

    ctrls.hover(function () {
      clearInterval(timer);
    }, function () {
      run();
    });

    function change(prev, next) {
      content_lis.eq(prev).stop().animate({
        opacity: 0
      });
      content_lis.eq(next).stop().animate({
        opacity: 1
      });
      btn_lis.eq(next).addClass('current').siblings().removeClass('current');
    }

View Code

2.1.3 组件化在 2.1.2 基础上处理成 jq plugin

 ;
    (function ($, window, undefined) {
      $.fn.mySlide = function () {
        var wrap = this;
        
        // content
        var content_lis = wrap.find('.slide-wrapper li');

        // bottom box
        var btn_lis = wrap.find('.slide-box li');

        // ctrls
        var ctrls = wrap.find('.ctrl');
        var prev = wrap.find('.prev');
        var next = wrap.find('.next');

        // run params
        var timer = null;
        var index = 0;
        var after = 0;

        var run = function () {
          timer = setInterval(function () {
            after = index + 1 >= content_lis.length ? 0 : index + 1;
            change.call(null, index, after);
            index = after;
          }, 2000);
        };

        run();

        btn_lis.each(function () {
          $(this).click(function () {
            after = $(this).index();
            change.call(null, index, after);
            index = after;
          });
        });

        prev.click(function () {
          after = index - 1 < 0 ? content_lis.length - 1 : index - 1;
          change.call(null, index, after);
          index = after;
        });
        next.click(function () {
          after = index + 1 >= content_lis.length ? 0 : index + 1;
          change.call(null, index, after);
          index = after;
        });

        ctrls.hover(function () {
          clearInterval(timer);
        }, function () {
          run();
        });

        function change(prev, next) {
          content_lis.eq(prev).stop().animate({
            opacity: 0
          });
          content_lis.eq(next).stop().animate({
            opacity: 1
          });
          btn_lis.eq(next).addClass('current').siblings().removeClass('current');
        }
      }
    }(jQuery, window, undefined));

    $('.my-slide').mySlide();

View Code

2.1.4 扩展组件默认配置项处理、一张图情况的性能优化、多个容器的兼容处理、链式调用，增加配置：是否允许轮播、轮播间隔时间、轮播一次持续时间、动画执行完成回调

 ;
    (function ($, window, undefined) {

      $.fn.mySlide = function (ops) {
        ops=$.extend(true,{},$.fn.mySlide.ops,ops);
        this.each(function () {
          var wrap = $(this);

          // content
          var content_lis = wrap.find('.slide-wrapper li');
          if (content_lis.length === 0) {
            return;
          };

          // bottom box
          var btn_lis = wrap.find('.slide-box li');

          // ctrls
          var ctrls = wrap.find('.ctrl');
          var prev = wrap.find('.prev');
          var next = wrap.find('.next');

          // run params
          var timer = null;
          var index = 0;
          var after = 0;

          var run = function () {
            timer = setInterval(function () {
              after = index + 1 >= content_lis.length ? 0 : index + 1;
              change.call(null, index, after);
              index = after;
            }, ops.frequency);
          };

          if(ops.isLoop){
            run();
          };          

          btn_lis.each(function () {
            $(this).click(function () {
              after = $(this).index();
              change.call(null, index, after);
              index = after;
            });
          });

          prev.click(function () {
            after = index - 1 < 0 ? content_lis.length - 1 : index - 1;
            change.call(null, index, after);
            index = after;
          });
          next.click(function () {
            after = index + 1 >= content_lis.length ? 0 : index + 1;
            change.call(null, index, after);
            index = after;
          });

          ctrls.hover(function () {
            clearInterval(timer);
          }, function () {
            if(ops.isLoop){
              run();
            }; 
          });

          function change(prev, next) {
            content_lis.eq(prev).stop().animate({
              opacity: 0
            },ops.last,function(){
              ops.cb && ops.cb();
            });
            content_lis.eq(next).stop().animate({
              opacity: 1
            },ops.last,function(){
              ops.cb && ops.cb();
            });
            btn_lis.eq(next).addClass('current').siblings().removeClass('current');
          }

        });
        return this;
      }

      // default option
      $.fn.mySlide.ops = {
        isLoop: true,
        last:'normal',
        frequency:2000,
        cb:null
      };

    }(jQuery, window, undefined));

    $('.my-slide').mySlide();

View Code

2.2 位移

基础代码

html 同上。

css 部分区域改变

* {
      margin: 0;
      padding: 0;
    }

    img {
      border: 0;
    }

    ul,
    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .my-slide {
      position: relative;
      margin: 0 auto;
      width: 300px;
      height: 100px;
      overflow: hidden;
    }

    /* .slide-wrapper */
    .my-slide .slide-wrapper {
      margin-left: 0;
      overflow: hidden;
      width: 1500px;
      height: 100%;
    }

    .my-slide .slide-wrapper li {
      float: left;
      width: 300px;
      height: 100%;
    }

    .my-slide .slide-wrapper li a,
    .my-slide .slide-wrapper li img {
      width: 100%;
      height: 100%;
    }

    /* btn */
    .my-slide .prev,
    .my-slide .next {
      position: absolute;
      top: 50%;
      z-index: 2;
      width: 35px;
      height: 70px;
      line-height: 70px;
      margin-top: -35px;
      border-radius: 3px;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0.6;
      color: #fff;
      text-align: center;
      background-repeat: no-repeat;
      transition: opacity .2s linear 0s;
    }

    .my-slide a:hover {
      opacity: 1;
    }

    .my-slide .prev {
      left: 5px;
    }

    .my-slide .next {
      right: 5px;
    }


    /* slide-box */
    .my-slide .slide-box {
      position: absolute;
      z-index: 30;
      left: 50%;
      bottom: 12px;
      margin-left: -60px;
      width: 120px;
      height: 20px;
      padding: 0 4px;
      text-align: center;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.5);
    }

    .my-slide .slide-box li {
      display: inline-block;
      margin: 4px 2px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #fff;
      cursor: pointer;
    }

    .my-slide .slide-box li.current {
      background-color: #fe6500;
    }

    .my-slide .slide-box li:hover {
      background-color: #fe6500;
    }

View Code

2.2.1 初级实现（2.1.2 基础上修改）

var wrap = $('.my-slide');

    // move obj
    var content_wrap=wrap.find('.slide-wrapper');    

    // wrap size    
    var wrap_w = wrap.width();

    // content
    var content_lis = wrap.find('.slide-wrapper li');
    var content_len = content_lis.length;

    // bottom box
    var btn_lis = wrap.find('.slide-box li');

    // ctrls
    var ctrls = wrap.find('.ctrl');
    var prev = wrap.find('.prev');
    var next = wrap.find('.next');

    // run params
    var timer = null;
    var index = 0;

    var run = function () {
      timer = setInterval(function () {
        index = index + 1 >= content_len ? 0 : index + 1;
        change(index);
      }, 2000);
    };

    run();

    btn_lis.each(function () {
      $(this).click(function () {
        index=$(this).index();
        change(index);        
      });
    });

    prev.click(function () {
      index = index - 1 < 0 ? content_len - 1 : index - 1;
      change(index);
    });
    next.click(function () {
      index = index + 1 >= content_len ? 0 : index + 1;
      change(index);
    });

    ctrls.hover(function () {
      clearInterval(timer);
    }, function () {
      run();
    });

    function change(index) {
      content_wrap.stop().animate({
        marginLeft: -wrap_w*index+'px'
      });
      btn_lis.eq(index).addClass('current').siblings().removeClass('current');
    }

View Code

2.2.2 封住成 jq plugin

;
    (function ($, window, undefined) {
      $.fn.mySlide = function () {
        var wrap = this;

        // move obj
        var content_wrap = wrap.find('.slide-wrapper');

        // wrap size    
        var wrap_w = wrap.width();

        // content
        var content_lis = wrap.find('.slide-wrapper li');
        var content_len = content_lis.length;

        // bottom box
        var btn_lis = wrap.find('.slide-box li');

        // ctrls
        var ctrls = wrap.find('.ctrl');
        var prev = wrap.find('.prev');
        var next = wrap.find('.next');

        // run params
        var timer = null;
        var index = 0;

        var run = function () {
          timer = setInterval(function () {
            index = index + 1 >= content_len ? 0 : index + 1;
            change(index);
          }, 2000);
        };

        run();

        btn_lis.each(function () {
          $(this).click(function () {
            index = $(this).index();
            change(index);
          });
        });

        prev.click(function () {
          index = index - 1 < 0 ? content_len - 1 : index - 1;
          change(index);
        });
        next.click(function () {
          index = index + 1 >= content_len ? 0 : index + 1;
          change(index);
        });

        ctrls.hover(function () {
          clearInterval(timer);
        }, function () {
          run();
        });

        function change(index) {
          content_wrap.stop().animate({
            marginLeft: -wrap_w * index + 'px'
          });
          btn_lis.eq(index).addClass('current').siblings().removeClass('current');
        }
      }
    }(jQuery, window, undefined));

    $('.my-slide').mySlide();

View Code

2.2.3 扩展组件默认配置项处理、一张图情况的性能优化、多个容器的兼容处理、链式调用，增加配置：是否允许轮播、轮播间隔时间、轮播一次持续时间、动画执行完成回调

;
    (function ($, window, undefined) {
      $.fn.mySlide = function (ops) {
        ops = $.extend({}, $.fn.mySlide.ops, ops);
        this.each(function () {
          var wrap = $(this);

          // move obj
          var content_wrap = wrap.find('.slide-wrapper');

          // wrap size    
          var wrap_w = wrap.width();

          // content
          var content_lis = wrap.find('.slide-wrapper li');
          var content_len = content_lis.length;

          // bottom box
          var btn_lis = wrap.find('.slide-box li');

          // ctrls
          var ctrls = wrap.find('.ctrl');
          var prev = wrap.find('.prev');
          var next = wrap.find('.next');

          // run params
          var timer = null;
          var index = 0;

          var run = function () {
            timer = setInterval(function () {
              index = index + 1 >= content_len ? 0 : index + 1;
              change(index);
            }, ops.frequency);
          };

          ops.isLoop && run();          

          btn_lis.each(function () {
            $(this).click(function () {
              index = $(this).index();
              change(index);
            });
          });

          prev.click(function () {
            index = index - 1 < 0 ? content_len - 1 : index - 1;
            change(index);
          });
          next.click(function () {
            index = index + 1 >= content_len ? 0 : index + 1;
            change(index);
          });

          ctrls.hover(function () {
            clearInterval(timer);
          }, function () {
            ops.isLoop && run();   
          });

          function change(index) {
            content_wrap.stop().animate({
              marginLeft: -wrap_w * index + 'px'
            },ops.last,function(){
              ops.cb && ops.cb()   
            });
            btn_lis.eq(index).addClass('current').siblings().removeClass('current');
          }

        });
      }

      // default option
      $.fn.mySlide.ops = {
        isLoop: true,
        last: 'normal',
        frequency: 2000,
        cb: null
      };
    }(jQuery, window, undefined));

    $('.my-slide').mySlide({
      isLoop: false
    });

View Code

2.2.4 扩展组件 dom 中 box 动态化、滚动小单元宽高动态化

html

  <div class="my-slide">
    <ul class="slide-wrapper">
      <li>
        <a href="javascript:"><img src="http://cdn.dowebok.com/144/images/1.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:"><img src="http://cdn.dowebok.com/144/images/2.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:"><img src="http://cdn.dowebok.com/144/images/3.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:"><img src="http://cdn.dowebok.com/144/images/4.jpg" alt=""></a>
      </li>
      <li>
        <a href="javascript:"><img src="http://cdn.dowebok.com/144/images/5.jpg" alt=""></a>
      </li>
    </ul>
    <a href="javascript:" class="ctrl prev">&lt;</a>
    <a href="javascript:" class="ctrl next">&gt;</a>
  </div>

View Code

css

* {
      margin: 0;
      padding: 0;
    }

    img {
      border: 0;
    }

    ul,
    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .my-slide {
      position: relative;
      margin: 0 auto;
      width: 300px;
      height: 100px;
      overflow: hidden;
    }

    /* .slide-wrapper */
    .my-slide .slide-wrapper {
      margin-left: 0;
      overflow: hidden;
      height: 100%;
    }

    .my-slide .slide-wrapper li {
      float: left;
      height: 100%;
    }

    .my-slide .slide-wrapper li a,
    .my-slide .slide-wrapper li img {
      width: 100%;
      height: 100%;
    }

    /* btn */
    .my-slide .prev,
    .my-slide .next {
      position: absolute;
      top: 50%;
      z-index: 2;
      width: 35px;
      height: 70px;
      line-height: 70px;
      margin-top: -35px;
      border-radius: 3px;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0.6;
      color: #fff;
      text-align: center;
      background-repeat: no-repeat;
      transition: opacity .2s linear 0s;
    }

    .my-slide a:hover {
      opacity: 1;
    }

    .my-slide .prev {
      left: 5px;
    }

    .my-slide .next {
      right: 5px;
    }


    /* slide-box */
    .my-slide .slide-box {
      position: absolute;
      z-index: 30;
      left: 50%;
      bottom: 12px;
      margin-left: -60px;
      width: 120px;
      height: 20px;
      padding: 0 4px;
      text-align: center;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.5);
    }

    .my-slide .slide-box li {
      display: inline-block;
      margin: 4px 2px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #fff;
      cursor: pointer;
    }

    .my-slide .slide-box li.current {
      background-color: #fe6500;
    }

    .my-slide .slide-box li:hover {
      background-color: #fe6500;
    }

View Code

;
    (function ($, window, undefined) {
      $.fn.mySlide = function (ops) {
        ops = $.extend({}, $.fn.mySlide.ops, ops);
        this.each(function () {
          var wrap = $(this);

          // move obj
          var content_wrap = wrap.find('.slide-wrapper');

          // wrap size    
          var wrap_w = wrap.width();
          var wrap_h = wrap.height();

          // content
          var content_lis = wrap.find('.slide-wrapper li');
          var content_len = content_lis.length;

          // init
          content_wrap.height(wrap_h);          
          content_wrap.width(wrap_w*content_len);
          content_lis.width(wrap_w);

          if (content_len === 0) {
            return;
          };

          // fill box
          wrap.append(addCtrls(content_len));

          // bottom box
          var btn_lis = wrap.find('.slide-box li');

          // ctrls
          var ctrls = wrap.find('.ctrl');
          var prev = wrap.find('.prev');
          var next = wrap.find('.next');

          // run params
          var timer = null;
          var index = 0;

          var run = function () {
            timer = setInterval(function () {
              index = index + 1 >= content_len ? 0 : index + 1;
              change(index);
            }, ops.frequency);
          };

          ops.isLoop && run();

          btn_lis.each(function () {
            $(this).click(function () {
              index = $(this).index();
              change(index);
            });
          });

          prev.click(function () {
            index = index - 1 < 0 ? content_len - 1 : index - 1;
            change(index);
          });
          next.click(function () {
            index = index + 1 >= content_len ? 0 : index + 1;
            change(index);
          });

          ctrls.hover(function () {
            clearInterval(timer);
          }, function () {
            ops.isLoop && run();
          });

          function change(index) {
            content_wrap.stop().animate({
              marginLeft: -wrap_w * index + 'px'
            }, ops.last, function () {
              ops.cb && ops.cb()
            });
            btn_lis.eq(index).addClass('current').siblings().removeClass('current');
          }

          function addCtrls(len) {
            var str = '<ul class="ctrl slide-box">';
            var i = 0;
            while (i < len) {
              if (i === 0) {
                str += '<li class="current"></li>';
              } else {
                str += '<li></li>';
              }
              i++;
            }
            return str;
          }

        });
      }

      // default option
      $.fn.mySlide.ops = {
        isLoop: true,
        last: 'normal',
        frequency: 2000,
        cb: null
      };
    }(jQuery, window, undefined));

    $('.my-slide').mySlide({
      // isLoop: false
    });

View Code

2.2.5 面向对象思维

function MySlide(ele,ops) {
      this.ops = {
        isLoop: true,
        last: 'normal',
        frequency: 2000,
        cb: null
      };
      this.ops=$.extend({},this.ops,ops);
      this.wrap = ele;
      this.content_wrap = this.wrap.find('.slide-wrapper');
      this.wrap_w = this.wrap.width();
      this.wrap_h = this.wrap.height();
      this.content_lis = this.wrap.find('.slide-wrapper li');
      this.content_len = this.content_lis.length;

      // ctrls      
      this.prev = this.wrap.find('.prev');
      this.next = this.wrap.find('.next');

      // run params
      this.timer = null;
      this.index = 0;

      this.init();
    }

    MySlide.prototype = {
      init: function () {
        this.size();
        if (this.content_len === 0) {
          return;
        };
        // fill box
        this.fill();
        this.ctrls = this.wrap.find('.ctrl');
        this.btn_lis = this.wrap.find('.slide-box li');

        this.ops.isLoop && this.run();
        this.boxClick(this);
        this.nextCtrl(this);
        this.prevCtrl(this);
        this.hover(this);
      },
      size: function () {
        this.content_wrap.height(this.wrap_h);
        this.content_wrap.width(this.wrap_w * this.content_len);
        this.content_lis.width(this.wrap_w);
      },
      fill: function () {
        this.wrap.append(this.addCtrls(this.content_len));
      },
      run: function () {
        var that = this;
        that.timer = setInterval(function () {
          that.index = that.index + 1 >= that.content_len ? 0 : that.index + 1;
          that.change();
        }, that.ops.frequency);
      },
      boxClick: function (obj) {
        obj.btn_lis.each(function () {
          $(this).click(function () {
            obj.index = $(this).index();
            obj.change();
          });
        });
      },
      nextCtrl: function (obj) {
        obj.next.click(function () {
          obj.index = obj.index + 1 >= obj.content_len ? 0 : obj.index + 1;
          obj.change();
        });
      },
      prevCtrl: function (obj) {
        obj.prev.click(function () {
          obj.index = obj.index - 1 < 0 ? obj.content_len - 1 : obj.index - 1;
          obj.change();
        });
      },
      hover: function (obj) {
        obj.ctrls.hover(function () {
          clearInterval(obj.timer);
        }, function () {
          obj.ops.isLoop && obj.run();
        });
      },
      change: function () {
        this.move({
          obj: this.content_wrap,
          w: this.wrap_w,
          index: this.index,
          last: this.ops.last,
          cb: this.ops.cb
        });
        this.boxMove(this.btn_lis, this.index);
      },
      move: function (obj) {
        obj.obj.stop().animate({
          marginLeft: -obj.w * obj.index + 'px'
        }, obj.last, function () {
          obj.cb && obj.cb()
        });
      },
      boxMove: function (obj, index) {  
        obj.eq(index).addClass('current').siblings().removeClass('current');
      },
      addCtrls: function (len) {
        var str = '<ul class="ctrl slide-box">';
        var i = 0;
        while (i < len) {
          if (i === 0) {
            str += '<li class="current"></li>';
          } else {
            str += '<li></li>';
          }
          i++;
        }
        return str;
      }
    };

    new MySlide($('.my-slide'),{isLoop:false});

View Code

3. 更多封装，日后再说。

相关阅读:
CocoaPods
Git
LLVM
浅入浅出数据结构（11）——简要介绍算法时间复杂度
 浅入浅出数据结构（10）——树的简介
 浅入浅出数据结构（8）——栈、后缀表达式与四则运算计算器
 浅入浅出数据结构（7）——特殊的表：队列与栈
 浅入浅出数据结构（6）——游标数组及其实现
 浅入浅出数据结构（5）——链表的操作
 浅入浅出数据结构（4）——线性表与链表
原文地址：https://www.cnblogs.com/justSmile2/p/10725540.html

轮播 从无到有

轮播从无到有