本文实例讲述了jQuery实现的无缝广告图片左右滚动功能。分享给大家供大家参考，具体如下：
先是写了一个此功能的jQuery插件,但是一时写不出如何使用鼠标进行滚动方向的切换,于是又写了另一个可以实现切换的版本...
原理:
1.把滚动的内容复制2份放到原内容左右,这样无论向左右滚动都不会出现断掉的情况
2.改变内容样式的left值实现滚动效果,向左或向右滚动一个内容的长度后,还原并继续滚动,这样看起来就像无缝一直滚动的样子了(视觉上的效果,^_^)
3.鼠标放上去则clearInterval,移开后继续setInterval
* { 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;}
