最近做个小项目又用到了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.me/javascript/JS_picture_scrolls/index.html[/demo]   [download]http://demo.skillcat.me/javascript/JS_picture_scrolls/JS_picture_scrolls.zip[/download]


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