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