最近做个小项目又用到了JS的无缝滚动，我在网上也看了大神们写的类似插件，反正都差不多吧，但也有些bug，正好也写出来共享一下，所以我就稍作修改了下（左右滚动都可以控制哦！），目前测试并没有什么问题，如果小伙伴们使用时遇到什么问题欢迎前来报错，我会及时修改，以下就分享代码：

向左滚动：

HTML代码：
<div id="scrolls">
 <table border="0" align="center" cellpadding="1" cellspacing="1" cellspace="0">
　　<tr>
　　　<td valign="top" id="mar1">
　　　　　<table width='100%' border='0' cellspacing='0'>
　　　　　　　<tr>
　　　　　　　　　<td>
　　　　　　　　　　<a href="#"><img class="scrimg" src="images/11.jpg" ></a>
　　　　　　　　　</td>
　　　　　　　　　<td>
　　　　　　　　　　<a href="#"><img class="scrimg" src="images/22.jpg" ></a>
　　　　　　　　　</td>
　　　　　　　　　<td>
　　　　　　　　　　<a href="#"><img class="scrimg" src="images/33.jpg" ></a>
　　　　　　　　　</td>
　　　　　　　　　<td>
　　　　　　　　　　<a href="#"><img class="scrimg" src="images/44.jpg" ></a>
　　　　　　　　　</td>
　　　　　　　　　<td>
　　　　　　　　　<a href="#"><img class="scrimg" src="images/55.jpg" ></a>
　　　　　　　　　</td>
　　　　　　　</tr>
　　　　　</table>
　　　</td>
　　　<td id="mar2" valign="top"></td>
　　</tr>
　</table>
</div>

CSS代码：
#mar1 a{margin: 0 4px;}/*图片之间的间隙*/
#scrolls {
　width: 50%;
　overflow: hidden;
　margin: 0 auto;
}
/*宽高可根据需求自定义*/
.scrimg{
　width: 231px;
　height: 156px;
}

JavaScript代码：
mar2.innerHTML = mar1.innerHTML
//向左滚动
function Marquee() {
　if(scrolls.scrollLeft >= scrolls.offsetWidth) {
　　scrolls.scrollLeft = 0;
　} else {
　　scrolls.scrollLeft++;
　}
};
var MyMar = setInterval(Marquee, 20) //数字越小滚动越慢
scrolls.onmouseover = function() {
　clearInterval(MyMar);
};
scrolls.onmouseout = function() {
　MyMar = setInterval(Marquee, 20); //数字越小滚动越慢
};

向右滚动请将function那段代码替换成此段代码即可：

//向右滚动请将function替换
function Marquee() {
　if(scrolls.scrollLeft <= 0) {
　　scrolls.scrollLeft += scrolls.offsetWidth;
　} else {
　　scrolls.scrollLeft--;
　}
};

 

附上效果演示及源码下载地址：

[demo]http://demo.skillcat.cn/javascript/JS_picture_scrolls/index.html[/demo]　　　[download]http://demo.skillcat.cn/javascript/JS_picture_scrolls/JS_picture_scrolls.zip[/download]

赏

技术成就梦想，细节成就品质。