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

来源：互联网发布：js触发click事件编辑：程序博客网时间：2024/05/18 01:47

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

原理:

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

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

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

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

<mce:style></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>