这第二款也是非常实用的插件，也是与图片相关，关于图片的需求太多了，这个是图片滚动哦，不过不是无缝滚动，是左像右滚动，到头的话再往回滚动，利用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; }
jq插件第二款来袭 图片滚动
时间： 2024-11-09 19:39:05