html广告图片的滚动部分,jQuery实现的无缝广告图片左右滚动功能详解

本文实例讲述了jQuery实现的无缝广告图片左右滚动功能。分享给大家供大家参考，具体如下：

先是写了一个此功能的jQuery插件,但是一时写不出如何使用鼠标进行滚动方向的切换,于是又写了另一个可以实现切换的版本...

原理:

1.把滚动的内容复制2份放到原内容左右,这样无论向左右滚动都不会出现断掉的情况

2.改变内容样式的left值实现滚动效果,向左或向右滚动一个内容的长度后,还原并继续滚动,这样看起来就像无缝一直滚动的样子了(视觉上的效果,^_^)

3.鼠标放上去则clearInterval,移开后继续setInterval

4.移动效果写成一个方法,切换方向时调用一次即可

* { margin:0; padding:0;}

ul { list-style:none; margin:0; padding:0;}

img { border:none;}

.bar {

margin:0 auto;

width:800px; height:48px; overflow:hidden;

line-height:48px; border:2px solid #EEE;}

.bar a.a_left,

.bar a.a_right{

float:left;

width:11px; height:48px;

background:url(a_left.png) no-repeat left center;}

.bar a.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_inner ul { height:48px; overflow:hidden; float:left; width:960px;}

.bar_inner ul li{ float:left;}

.bar_inner ul li a{ padding:0 16px; display:block; height:48px; line-height:48px;}

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

var scrollBar = 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(){

return this.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;

var that = this;

var f = function(){

if(that.pos == "l"){

var l = 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 {

var l = 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); }

)

}

}

var s = new scrollBar();

s.run("r");

$(".a_left").mouseover(function(){

clearInterval( s.s);

s.run("l");

})

$(".a_right").mouseover(function(){

clearInterval( s.s);

s.run("r");

})

希望本文所述对大家jQuery程序设计有所帮助。