如何diy出图片滚动的效果

类似这种可以用按钮控制图片滚动的!
本来打算自己写一个的,可是要获取的图片相关信息太多了麻烦,所以用了下diy   选择样式2.在后台样式2中写了些css,js,结果什么效果都没!
问题1：自己写的样式代码插入到哪里执行的?
问题2：<style id="diy_style" type="text/css"></style>  diy_style在哪里定义的?

DIY 图片整体横向滚动 带左右方向键
1、后台 门户－模块模板－添加附件模块
2、取名称“图片整体横移”
3、粘贴如下代码：

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

复制代码

前台DIY:
拉一个100%框架，插入附件模块，数据来源选图片附件；标题长度填写：16
主题方式调用：选是则每个主题1张图片，选否调用每个主题的多张图片
显示条数：10       （要显示多少图片自己看着办）
显示样式：选下拉菜单里"带方向图片连续滚动"。
缩略图宽度：108
缩略图高度：87
模块样式中内边距：上 0px   右 0px   下 0px    左 -15px

楼上回的不错

友情帮顶。。。。。。

不错的代码，学习了，但是最好把左右的箭头图片文件也放出来，
为什么把左右箭头的图片调用去掉后就是静止不动的了？

   谁能告诉我为什么现在不动了？？？    http://www.cjimo.cn/forum.php

很不错。。。。

回复 s36376149 的帖子

不错支持了，

这样子就可以去掉了

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

复制代码