jq插件第二款来袭 图片滚动
2014-07-23 12:09
441 查看
这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认为1张,另外提供了连个外接方法, 停止自动滚动$.fn.roll.stop,继续自动滚动$.fn.roll.auto,不多说,上菜!
JQ插件代码
html
调用
css
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; }
相关文章推荐
- jq 列表滚动图片jcarousellite插件介绍
- 【转】推荐一个很棒的jquery图片滚动效果插件-jqFancyTransitions
- jCarousel(jquery图片左右滚动插件)
- 基于jQuery图片平滑连续滚动插件
- jcarousellite.js 基于Jquery的图片无缝滚动插件
- jQuery插件―【图片文字循环滚动】
- 10多个 jQuery 图片滚动效果插件
- jq图片预加载+自动等比例缩放插件
- jquery图片不间断滚动切换插件 jCarousel Lite
- Jquery图片滚动插件—BxCarousel
- Jquery图片滚动插件—BxCarousel
- 自己写的一个Jquery图片滚动插件
- 基于jQuery图片平滑连续滚动插件
- 基于jquery的图片滚动插件代码
- EasySlider 图片滚动的JQuery插件的改版(支持多张图片同时显示)
- Jquery图片无缝滚动插件
- 自己写的jQuery插件(二)-- 图片滚动显示
- 好用的JQuery插件Easy Slider(图片滚动,多样式设置)
- JQ 图片滚动
- JQ滚动插件