Marquee
模仿IE下面的marquee效果，鼠标移上去暂停。形成环的主要原理在于每张图片一旦判断出了外面的显示窗口就添加到尾部，用append和prepend模拟数组的push()和shift()。
代码如下:
HTML
CSS
}
.marquee ul li a:hover{
color: red;
}
.marquee ul li a:hover{
color: red;
}
JavaScript
//给构造函数添加方法
BoxObj.prototype={
BoxObj.prototype={
commonScroll:function(){
//接收对象属性
var obj=this.$element;
var boxWindow=$(this.$element).children('ul');
var speed=this.defaults.speed;
var style=this.defaults.style;
var direction=(this.defaults.direction=='left')? 1 : -1;
var lists=$(boxWindow).children('li');
var len=$(lists).length;
var boxWidth=$(lists[0]).width();
var timer;
var step=(this.defaults.direction=='left')? 0 : boxWidth;
function move(style,speed,direction){
if (style==0) {
if (direction==1) {
step+=1;
if(step><a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Width){
step-=<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Width;
$(<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Window).append($(<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Window).children().eq(0));//将第一项放在最后，相当于push(0),shift()
}else{
$(obj).scrollLeft(step);
}
}else if (direction== -1) {
step-=1;
if(step<0){
step+=<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Width;
$(<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Window).prepend($(<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Window).children().eq(len-1));//将最后一项放在最前，相当于pop(last),unshift()
}else{
$(obj).scrollLeft(step);
}
}else{//不执行之外的数值
}
}else{//留待扩展,多了改switch
}
}
timer=setInterval(function(){
move(style,direction);
},10*speed); //由于时间取得小，肉眼就看不出来
$(lists).each(function() {//鼠标移上暂停
$(this).hover(function() {
clearInterval(timer);
},function() {
clearInterval(timer);
timer=setInterval(function(){
move(style,direction);
},10*speed);
});
});
}}
$.fn.marquee=function(options){
//创建实体
var BoxObj=new BoxObj(this,options);
//用尾调的形式调用对象方法
return BoxObj.commonScroll();
}
})(jQuery,document);
以上所述就是本文的全部内容了，希望大家能够喜欢。
原文链接：https://www.f2er.com/jquery/53420.html