jq插件第二款来袭 图片滚动

这第二款也是非常实用的插件，也是与图片相关，关于图片的需求太多了，这个是图片滚动哦，不过不是无缝滚动，是左像右滚动，到头的话再往回滚动，利用scrollLeft实现的，支持自动滚动和每次滚动的个数默认为1张，另外提供了连个外接方法， 停止自动滚动$.fn.roll.stop，继续自动滚动$.fn.roll.auto，不多说，上菜！

JQ插件代码

(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 = 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);

html

<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>

css

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