分享一个我的图片轮播代码给大家 [复制链接]

1. <style type="text/css">
   
2. <!--
   
3. #demo {
   
4. background: #FFF;
   
5. overflow:hidden;
   
6. border: 1px dashed #CCC;
   
7. width: 958px;
   
8. }
   
9. #demo img {
   
10. border: 3px solid #F2F2F2;
    
11. }
    
12. #indemo {
    
13. float: left;
    
14. width: 955%;
    
15. }
    
16. #demo1 {
    
17. float: left;
    
18. }
    
19. #demo2 {
    
20. float: left;
    
21. }
    
22. -->
    
23. </style>
    
24. <div id="demo">
    
25. <div id="indemo">
    
26. <div id="demo1">
    
27. <a href='http://mc0713.66rt.com/thread-244-1-1.html'><img src=http://mc0713.66rt.com/attachments/day_180818/1808180947d7f7a346491f15af.jpeg width=120 height=80 border="0"/></a>
    
28. <a href='http://mc0713.66rt.com/thread-252-1-1.html'><img src=http://mc0713.66rt.com/attachments/day_180819/1808192233d7ac3b44cd9ff999.jpeg width=120 height=80 border="0"/></a>
    
29. <a href='http://mc0713.66rt.com/thread-234-1-1.html'><img src=http://mc0713.66rt.com/attachments/day_180815/1808152130365854e7350e7a02.jpg width=120 height=80 border="0"/></a>
    
30. <a href='http://mc0713.66rt.com/thread-246-1-1.html'><img src=http://mc0713.66rt.com/attachments/day_180818/1808181323529c8b9ecb65210a.jpg width=120 height=80 border="0"/></a>
    
31. <a href='http://mc0713.66rt.com/thread-249-1-1.html'><img src=http://mc0713.66rt.com/attachments/day_180818/1808182217ce8d5828b84c18e3.gif width=120 height=80 border="0"/></a>
    
32. <a href='http://mc0713.66rt.com/thread-250-1-1.html'><img src=http://mc0713.66rt.com/attachments/day_180819/18081907386d2a2d1f57ea0572.jpeg width=120 height=80 border="0"/></a>
    
33. <a href='http://mc0713.66rt.com/thread-221-1-1.html'><img src=http://mc0713.66rt.com/attachments/day_180813/1808131849e844bc32d7e49f73.jpeg width=120 height=80 border="0"/></a>
    
34. <a href='http://mc0713.66rt.com/thread-254-1-1.html'><img src=http://mc0713.66rt.com/attachments/day_180820/18082010070a297697fea30560.jpg width=120 height=80 border="0"/></a>
    
35. <a href='http://mc0713.66rt.com/thread-39-1-2.html'><img src=http://mc0713.66rt.com/attachments/day_180807/1808071816176aacf6ae3e2a8f.jpeg width=120 height=80 border="0"/></a>
    
36. <a href='http://mc0713.66rt.com/thread-222-1-1.html'><img src=http://mc0713.66rt.com/attachments/day_180813/180813185994946ea6bcf50b08.jpeg width=120 height=80 border="0"/></a>
    
37. <div id="demo2"></div>
    
38. </div>
    
39. </div>
    
40. <script>
    
41. <!--
    
42. var speed=10;
    
43. var tab=document.getElementById("demo");
    
44. var tab1=document.getElementById("demo1");
    
45. var tab2=document.getElementById("demo2");
    
46. tab2.innerHTML=tab1.innerHTML;
    
47. function Marquee(){
    
48. if(tab2.offsetWidth-tab.scrollLeft<=0)
    
49. tab.scrollLeft-=tab1.offsetWidth
    
50. else{
    
51. tab.scrollLeft++;
    
52. }
    
53. }
    
54. var MyMar=setInterval(Marquee,speed);
    
55. tab.onmouseover=function() {clearInterval(MyMar)};
    
56. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
    
57. -->
    
58. </script>

复制代码

上面的图片链接图片所在帖子链接自行本地记事本更换，代码可放第三，头部，广告等位置，自己选择合适的地方放吧，我就不一一解释了。