JS_无缝广告图片左右滚动(基于JQ)

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

 

原理:

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

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

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

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

 

 

<mce:style><!-- * { 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;} --></mce:style><style mce_bogus="1">* { 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;}</style> <body> <div class="bar"> <a href="#" mce_href="#" class="a_left"></a> <div class="bar_wrap"> <div class="bar_inner"> <ul> <li><a href="#" mce_href="#" title="" ><img src="pic.png" mce_src="pic.png" alt="" /></a></li> <li><a href="#" mce_href="#" title="" ><img src="pic.png" mce_src="pic.png" alt="" /></a></li> <li><a href="#" mce_href="#" title="" ><img src="pic.png" mce_src="pic.png" alt="" /></a></li> <li><a href="#" mce_href="#" title="" ><img src="pic.png" mce_src="pic.png" alt="" /></a></li> <li><a href="#" mce_href="#" title="" ><img src="pic.png" mce_src="pic.png" alt="" /></a></li> <li><a href="#" mce_href="#" title="" ><img src="pic.png" mce_src="pic.png" alt="" /></a></li> <li><a href="#" mce_href="#" title="" ><img src="pic.png" mce_src="pic.png" alt="" /></a></li> <li><a href="#" mce_href="#" title="" ><img src="pic.png" mce_src="pic.png" alt="" /></a></li> <li><a href="#" mce_href="#" title="" ><img src="pic.png" mce_src="pic.png" alt="" /></a></li> <li><a href="#" mce_href="#" title="" ><img src="pic.png" mce_src="pic.png" alt="" /></a></li> </ul> </div> </div> <a href="#" mce_href="#" class="a_right"></a> </div>

 

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"); })