图片首尾相接无缝滚动实例代码（向左/向右）

 前几天遇到一个图片滚动的问题，平实写的滚动都是一次滚动，首位不想接，下面的例子可以解决这个问题，首尾无缝相接滚动，可以向左滚动，也可以向右滚动。下面就是例子的代码。图片省略，样式省略。

 

详情请访问：http://www.walkerjava.com/thread-153-1-1.html

html代码 

 

1. <div id="colee_right" style="white-space: nowrap; overflow: hidden;">
   
2. <table cellpadding="0" cellspacing="0" border="0" style="border: none;">
   
3. <tr>
   
4. <td id="colee_right1" valign="top" align="center" style="border: none;">
   
5. <table class="rolltable" cellpadding="0" cellspacing="0" border="0" style="border: none;">
   
6. <tr align="center">
   
7. <td>
   
8. <img class="title_img" src="images/new_dedecms.gif" title="织梦内容管理系统" />
   
9. </td>
   
10. <td>
    
11. <img class="title_img" src="images/new_discuz.gif" title="Discuz!社区论坛" />
    
12. </td>
    
13. <td>
    
14. <img class="title_img" src="images/new_phpcms.gif" title="phpcms内容管理系统" />
    
15. </td>
    
16. <td>
    
17. <img class="title_img" src="images/new_dvbbs.gif" title="动网论坛" />
    
18. </td>
    
19. <td>
    
20. <img class="title_img" src="images/new_ecms.gif" title="帝国管理系统" />
    
21. </td>
    
22. <td>
    
23. <img class="title_img" src="images/new_shopex.gif" title="shopex专业网店系统" />
    
24. </td>
    
25. <td>
    
26. <img class="title_img" src="images/new_joekoe.gif" title="乔客内容管理系统" />
    
27. </td>
    
28. <td>
    
29. <img class="title_img" src="images/new_phpwind.gif" title="phpwind内容管理系统" />
    
30. </td>
    
31. <td>
    
32. <img class="title_img" src="images/new_pjblog.gif" title="中文个人博客系统程序" />
    
33. </td>
    
34. <td>
    
35. <img class="title_img" src="images/new_oblog.gif" title="oblog博客系统" />
    
36. </td>
    
37. <td>
    
38. <img class="title_img" src="imagesnew_dvnet.gif" title="动网内容管理系统" />
    
39. </td>
    
40. </tr>
    
41. </table>
    
42. </td>
    
43. <td id="colee_right2" valign="top" style="border: none;"></td>
    
44. </tr>
    
45. </table>
    
46. </div>
    

复制代码

javascript部分

1. var speed = 30
   
2. //速度数值越大速度越慢
   
3. var colee_right2 = document.getElementById("colee_right2");
   
4. var colee_right1 = document.getElementById("colee_right1");
   
5. var colee_right = document.getElementById("colee_right");
   
6. colee_right2.innerHTML = colee_right1.innerHTML;
   
7. function Marquee4() {
   
8. // 控制从右向左滚动
   
9. if (colee_right.scrollLeft >= colee_right2.offsetWidth)
   
10. colee_right.scrollLeft = 0;
    
11. else {
    
12. colee_right.scrollLeft++;
    
13. }
    
14. // 控制从左向右滚动
    
15. /*
    
16. if (colee_right.scrollLeft <= 0)
    
17. colee_right.scrollLeft += colee_right2.offsetWidth;
    
18. else {
    
19. colee_right.scrollLeft--;
    
20. }*/
    
21. }
    
22. var MyMar4 = setInterval(Marquee4, speed);
    
23. colee_right.onmouseover = function() {
    
24. clearInterval(MyMar4);
    
25. }
    
26. colee_right.onmouseout = function() {
    
27. MyMar4 = setInterval(Marquee4, speed);
    
28. }