论坛图片左右滚动方法 纯DIY 超简单

  论坛图片列表滚动方法 超简单  废话不说 直接发布代码

网站版本：2.5  3.0  
测试网址：www.yibin58.com

1. <style type="text/css">
   
2. <!--
   
3. #demo {
   
4. background: #FFF;
   
5. overflow:hidden;
   
6. border: 0px;
   
7. width: 100%;
   
8. }
   
9. #demo img {
   
10. border: 3px solid #F2F2F2;
    
11. }
    
12. #indemo {
    
13. float: left;
    
14. width: 800%;
    
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. <div class="module cl ml">
    
28. <ul>
    
29. [loop]
    
30. <li style="width: {picwidth}px;">
    
31. <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a>
    
32. <p><a href="{url}" title="{title}"{target}>{title}</a></p>
    
33. </li>
    
34. [/loop]
    
35. </ul>
    
36. </div></div>
    
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>
    

复制代码

PS:  效果就不载图了，直接进网站看  www.ybdiaoyu.com

效果呢？

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 0px;
width: 100%;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<div class="module cl ml">
<ul>
[loop]
<li style="width: {picwidth}px;">
<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a>
<p><a href="{url}" title="{title}"{target}>{title}</a></p>
</li>
[/loop]
</ul>
</div></div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

谢谢！这个代码很实用，效果不错！

怎么是双层的，而切是一过性的不能循环！

啥玩意啊