jQuery实现的无缝广告图片左右滚动功能详解
本文实例讲述了jQuery实现的无缝广告图片左右滚动功能。分享给大家供大家参考，具体如下：
先是写了一个此功能的jQuery插件,但是一时写不出如何使用鼠标进行滚动方向的切换,于是又写了另一个可以实现切换的版本...
原理:
1.把滚动的内容复制2份放到原内容左右,这样无论向左右滚动都不会出现断掉的情况
2.改变内容样式的left值实现滚动效果,向左或向右滚动一个内容的长度后,还原并继续滚动,这样看起来就像无缝一直滚动的样子了(视觉上的效果,^_^)
3.鼠标放上去则clearInterval,移开后继续setInterval
4.移动效果写成一个方法,切换方向时调用一次即可
<style>
*{margin:0;padding:0;}
ul{list-style:none;margin:0;padding:0;}
img{border:none;}
.bar{
margin:0auto;
width:800px;height:48px;overflow:hidden;
line-height:48px;border:2pxsolid#EEE;}
.bara.a_left,
.bara.a_right{
float:left;
width:11px;height:48px;
background:url(a_left.png)no-repeatleftcenter;}
.bara.a_right{float:right;background-image:url(a_right.png);}
.bar_wrap{float:left;position:relative;width:776px;height:48px;white-space:nowrap;overflow:hidden;}
.bar_inner{position:relative;height:48px;line-height:48px;left:0;width:2880px;white-space:nowrap;}
.bar_innerul{height:48px;overflow:hidden;float:left;width:960px;}
.bar_innerulli{float:left;}
.bar_innerullia{padding:016px;display:block;height:48px;line-height:48px;}
</style>
<body> <divclass="bar"> <ahref="#"class="a_left"></a> <divclass="bar_wrap"> <divclass="bar_inner"> <ul> <li><ahref="#"title=""><imgsrc="pic.png"alt=""/></a></li> <li><ahref="#"title=""><imgsrc="pic.png"alt=""/></a></li> <li><ahref="#"title=""><imgsrc="pic.png"alt=""/></a></li> <li><ahref="#"title=""><imgsrc="pic.png"alt=""/></a></li> <li><ahref="#"title=""><imgsrc="pic.png"alt=""/></a></li> <li><ahref="#"title=""><imgsrc="pic.png"alt=""/></a></li> <li><ahref="#"title=""><imgsrc="pic.png"alt=""/></a></li> <li><ahref="#"title=""><imgsrc="pic.png"alt=""/></a></li> <li><ahref="#"title=""><imgsrc="pic.png"alt=""/></a></li> <li><ahref="#"title=""><imgsrc="pic.png"alt=""/></a></li> </ul></div> </div> <ahref="#"class="a_right"></a> </div>
varscrollBar=function(){
this.step=14;
this.speed=100;
this.inner=$(".bar_inner");
this.wrap=$(".bar_wrap");
this.ini=0;
this.pos="l";
this.s;
}
scrollBar.prototype={
check:function(){
returnthis.inner.width()<this.wrap.width()?false:true;
},
init:function(){
if(this.check()){
this.inner
.html(this.inner.html()+this.inner.html()+this.inner.html())
.css("left",-this.inner.width()/3+"px");
}
},
run:function(pos){
if(!this.check()){return;}
if(this.ini==0){this.init();}
this.ini=1;
this.pos=pos;
varthat=this;
varf=function(){
if(that.pos=="l"){
varl=parseInt(that.inner.css("left"))-that.step;
that.inner.css("left",l+"px");
//console.log(l);
if(parseInt(that.inner.css("left"))<=-(that.inner.width()/3*2)){
that.inner.css("left",-that.inner.width()/3+"px");
}
}
else{
varl=parseInt(that.inner.css("left"))+that.step;
that.inner.css("left",l+"px");
//console.log(l);
if(parseInt(that.inner.css("left"))>=0){
that.inner.css("left",-that.inner.width()/3+"px");
}
}
}
if(this.s){clearInterval(that.s);};
this.s=setInterval(f,that.speed);
that.inner.hover(
function(){clearInterval(that.s);},
function(){clearInterval(that.s);that.s=setInterval(f,that.speed);}
)
}
}
vars=newscrollBar();
s.run("r");
$(".a_left").mouseover(function(){
clearInterval(s.s);
s.run("l");
})
$(".a_right").mouseover(function(){
clearInterval(s.s);
s.run("r");
})
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。