(function($){    $.fn.roll = function(options){        if($(this).length == 0) return false;        var opts = $.extend({},$.fn.roll.defaults,options);        function Rolling(o){            this.oParent = o;            this.imgList = o.find(opts[‘imgList‘]);            this.rollEle = o.find(opts[‘rollEle‘]);            this.rollEleParent = o.find(opts[‘rollEleParent‘]);            this.bl = o.find(opts[‘btn-left‘]);            this.br = o.find(opts[‘btn-right‘]);            this.auto = opts[‘automatic‘];            this.speed = opts[‘speed‘];            this.num = opts[‘num‘];            this.stop = opts[‘stop‘];            this.onOff = true;            this.leftValue = http://www.mamicode.com/0;            this.len = 0;            this.index = 0;            this.timer = null;            this.singleW = 0;            this.preIndex = -1;            this.nowIndex = 0;        }                Rolling.prototype = {            init:function(){                var _this = this;                this.len = this.rollEle.length;                this.singleWidth();                this.rollEleParent.width(this.singleW*this.len);                this.bl.on(‘click‘,function(){                    _this.stopRoll();                    _this.fnRoll(0);                    return false;                });                this.br.on(‘click‘,function(){                    _this.stopRoll();                    _this.fnRoll(1);                    return false;                });                if(this.auto){                    this.timer = setInterval(function(){                        _this.automatic();                    },this.speed[0]);                                        this.oParent.hover(function(){                        _this.stopRoll();                    },function(){                        _this.timer = setInterval(function(){                            _this.automatic();                                                },_this.speed[0])                    })                }            },            singleWidth:function(){                this.singleW =  this.rollEle.eq(0).outerWidth(true);            },                      fnRoll:function(dir){                //dir == 1,→→滚， dir==0，←←滚                var _this = this;                this.onOff = false;                this.preIndex = this.index;                var scrolling = dir ? {scrollLeft:_this.singleW*this.num + _this.singleW*_this.index}:{scrollLeft:_this.leftValue - _this.singleW*this.num}                this.imgList.animate(scrolling,_this.speed[1],function(){                    _this.onOff = true;                    if(dir){                       if(_this.index < _this.len){                        _this.index += _this.num;                        _this.nowIndex = _this.index;                        }else{                            _this.index = _this.len;                                                                               }                                              }else{                        if(_this.index > 0){                            _this.index -= _this.num;                            _this.nowIndex = _this.index                        }else{                            _this.index = 0;                                                   }                        _this.nowIndex = _this.index;                    }                                       _this.leftValue = $(this).scrollLeft();                    if(this.nowIndex == 0){      //当前索引为0是，则应该向右滚动，重置preIndex值（当前为0）                        this.preIndex = -1;                    }                                   })            },            stopRoll:function(){                               clearInterval(this.timer)             },            automatic:function(){                   if(this.leftValue >=  this.rollEleParent.width() - this.imgList.width() + parseFloat(this.rollEleParent.css(‘margin-left‘))){                    //判断 滚动容器是否滚到头，若到头了，则往回滚                                this.fnRoll(0)                }                if(this.preIndex < this.nowIndex){    //判断上一次与当前索引的关系，若大于，则是向有滚动，若小于或等于则向左滚动                    this.fnRoll(1)                    return;                }                if(this.preIndex >= this.nowIndex ){                                      this.fnRoll(0)                }                if(this.nowIndex == 0){      //当前索引为0是，则应该向右滚动，重置preIndex值（当前为0）                    this.preIndex = -1;                }                                            }                   }              return this.each(function(){            var $this = $(this);            var obj = new Rolling($this);            obj.init();            $.fn.roll.stop = function(){                obj.stopRoll();            }   //曝露停止自动滚动方法，共外部条用            $.fn.roll.auto = function(){                obj.stopRoll();                obj.timer = setInterval(function(){                    obj.automatic();                },obj.speed[0]);                                            }   //曝露继续自动滚动方法，共外部条用                   })    };    $.fn.roll.defaults = {        ‘imgList‘ : ‘.sildeImgList‘,        //滚动容器        ‘rollEle‘ : ‘li‘,                   //滚动元素        ‘rollEleParent‘ : ‘ul‘,             //滚动元素父级        ‘btn-left‘: ‘.btn-left‘,            //button←←        ‘btn-right‘: ‘.btn-right‘,          //button→→        ‘automatic‘: false,                 //是否自动滚动        ‘speed‘    : [3000,300],            //间隔，速度        ‘num‘      : 1,                     //一次滚动的数量    };             })(jQuery);

<div class="sildeImgBox">      <span class="btn-left"></span>      <div class="sildeImgList">             <ul>                 <li><img src="images/mm1.jpg" alt=""></li>                 <li><img src="images/mm2.jpg" alt=""></li>                 <li><img src="images/mm3.jpg" alt=""></li>                 <li><img src="images/mm1.jpg" alt=""></li>                 <li><img src="images/mm2.jpg" alt=""></li>                 <li><img src="images/mm3.jpg" alt=""></li>                 <li><img src="images/mm1.jpg" alt=""></li>                 <li><img src="images/mm2.jpg" alt=""></li>             </ul>      </div>      <span class="btn-right"></span></div>

<script>$(function(){    $(‘.sildeImgBox‘).eq(0).roll({‘automatic‘ : true})})</script>

.sildeImgBox { width: 940px; margin: 0 auto; height: 344px; }.sildeImgBox .btn-left { background-position: 0 0; left: 0; }.sildeImgBox .btn-right { background-position: 100% 0; right: 0; }.sildeImgBox .sildeImgList { width: 820px; height: 349px; overflow: hidden; }.sildeImgBox .sildeImgList ul { left: 0; right: 0; margin-left: -15px; width: 5000px; }.sildeImgBox .sildeImgList li { display: inline; float: left; width: 262px; height: 344px; margin-left: 15px; box-shadow: 2px 2px 5px rgba(4, 0, 0, 0.75); }.sildeImgBox .btn-left, .sildeImgBox .btn-right .sildeImgBox .sildeImgList ul { position: absolute; }.sildeImgBox .btn-left, .sildeImgBox .btn-right { display: block; }.sildeImgBox, .sildeImgBox .sildeImgList { position: relative; }