纯DIY -- 【图片带方向图片连续滚动 带左右方向键 for X2.0正式版】

演示站：http://bbs.zm7.cn

技术支持：http://www.cgeggs.com
                 http://www.cgeggs.cn

免费献上，分享快乐

这是纯DIY出来的效果。

DIY图片带方向图片连续滚动 带左右方向键

带方向图片连续滑动使用方法：

1、后台 门户－模块管理－添加附件模块





2、取名称“带方向图片连续滚动”


3、粘贴如下代码：

1. 
   
2. <div class="module cl">
   
3. <table align="center" border="0" width="940" cellspacing="0" cellpadding="0">
   
4. <tr>
   
5. <td width="11"><img id="r_l" onclick="r_left()"src="static/image/common/panpanluo_button_l.gif">
   
6. </td>
   
7. <td>
   
8. <TABLE cellSpacing=0 cellPadding=0 width=916 border=0>
   
9. <TBODY>
   
10. <TR>
    
11. <TD vAlign=top background="">
    
12. <TABLE cellSpacing=0 cellPadding=0 width=916 border=0>
    
13. <TBODY>
    
14. <TR>
    
15. <TD vAlign=center align=middle >
    
16. <DIV id=demo style="OVERFLOW: hidden; WIDTH: 916px; COLOR: #ffffff; ">
    
17. <TABLE cellPadding=0 width="100%" align=left border=0
    
18. cellspace="0">
    
19. <TBODY>
    
20. <TR>
    
21. <TD id=demo1 vAlign=top>
    
22. <TABLE cellSpacing=1 cellPadding=1>
    
23. <TBODY>
    
24. <TR vAlign=top>
    
25. <TD vAlign=top noWrap>
    
26. <DIV align=right>
    
27. <TABLE cellSpacing=0 cellPadding=0 align=center border=0>
    
28. <TBODY>
    
29. <TR>
    
30. [loop]
    
31. <TD align=middle>
    
32. <TABLE cellSpacing=0 cellPadding=0 width=120
    
33. align=center border=0>
    
34. <TBODY>
    
35. <TR>
    
36. <TD align=middle >
    
37. <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a>
    
38. </TD></TR>
    
39. <TR>
    
40. <TD class=nav1 align=middle ><A
    
41. class=apm2
    
42. href="{url}" title="{title}"{target}>{title}</A></TD></TR></TBODY></TABLE></TD>
    
43. [/loop] </TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></TD>
    
44. <TD id=demo2 width="0"></TD>
    
45. </TR></TBODY></TABLE></DIV>
    
46. <SCRIPT>
    
47. var dir=1//每步移动像素，数大为快
    
48. var speed=1//循环周期（毫秒）数大为慢
    
49. demo2.innerHTML=demo1.innerHTML
    
50. function Marquee(){//正常移动
    
51. //alert(demo2.offsetWidth+"\n"+demo.scrollLeft)
    
52. if (dir>0 && (demo2.offsetWidth-demo.scrollLeft)<=0) demo.scrollLeft=0
    
53. if (dir<0 &&(demo.scrollLeft<=0)) demo.scrollLeft=demo2.offsetWidth
    
54. demo.scrollLeft+=dir
    
55. demo.onmouseover=function() {clearInterval(MyMar)}//暂停移动
    
56. demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//继续移动
    
57. }
    
58. function r_left(){if (dir=-1)dir=1}//换向左移
    
59. function r_right(){if (dir=1)dir=-1}//换向右移
    
60. var MyMar=setInterval(Marquee,speed)
    
61. </SCRIPT>
    
62. </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
    
63. </td>
    
64. <td width="11"><img id="r_r" onclick="r_right()" src="static/image/common/panpanluo_button_r.gif">
    
65. </td>
    
66. </tr>
    
67. </table></div>

复制代码

4、前台DIY:


拉一个100%框架，插入帖子模块，数据来源选帖子；标题长度填写：16
主题方式调用：选是则每个主题1张图片，选否调用每个主题的多张图片



显示条数：10       （要显示多少图片自己看着办）
显示样式：选下拉菜单里"带方向图片连续滚动"。
缩略图宽度：108
缩略图高度：87
模块样式中内边距：上 0px   右 0px   下 0px    左 -15px

以上数字根据论坛情况自己调节。
保存收工

箭头图片附件下载：



把附件用ftp上传到：/static/image/common/
目录下

代码呢？

前排支持 www.xyss.org

好漂亮，支持。。

真是不错哦！线支持一下楼主！等下试试，不知道可以让每个版块的图片内容根据版块内容单独调取不能呢！

我支持

非常感谢，找了好多天，终于解决了问题。看效果《禹城摄影网http://yuchengsheying.com》