Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

我弄了个图片横向滚动的代码,但是图片间距是0,不知道怎么调,求指点

[复制链接]
加伊影像 发表于 2014-3-11 17:49:42 | 显示全部楼层 |阅读模式
DIY模块素材
模块类型: 论坛类
展示风格: 图片列表
是否原创:
我弄了个图片横向滚动的代码,但是图片间距是0,不知道怎么调,求指点

代码所在地址:http://www.022sy.com/forum.php?mod=forumdisplay&fid=41

代码:
<div class="module cl">
<table align="center" border="0" width="1280" cellspacing="100" cellpadding="0">
<tr>
<td width="11"><img id="r_l"src="static/image/common/left.png">
</td>
<td>
<TABLE cellSpacing=0 cellPadding=0 width=1280 border=0>
<TBODY>
<TR>
<TD vAlign=top background="">
<TABLE cellSpacing=0 cellPadding=0 width=1280 border=0>
<TBODY>
<TR>
<TD vAlign=center align=middle >
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 1280px; COLOR: #ffffff; ">
<TABLE cellPadding=0 width="100%" align=left border=0
cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top>
<TABLE cellSpacing=1 cellPadding=1>
<TBODY>
<TR vAlign=top>
<TD vAlign=top noWrap>
<DIV align=right>
<TABLE cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
[loop]
<TD align=middle>
<TABLE cellSpacing=0 cellPadding=0 width=120
align=center border=0>
<TBODY>
<TR>
<TD align=middle >
<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}"/></a>
</TD></TR>
<TR>
<TD class=nav1 align=middle ><A
class=apm2
href="{url}" title="{title}"{target}>{title}</A></TD></TR></TBODY></TABLE></TD>
[/loop] </TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></TD>
<TD id=demo2 width="20"></TD>
</TR></TBODY></TABLE></DIV>
<SCRIPT>
var dir=1//每步移动像素,数大为快
var speed=20//循环周期(毫秒)数大为慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){//正常移动
//alert(demo2.offsetWidth+"\n"+demo.scrollLeft)
if (dir>0 && (demo2.offsetWidth-demo.scrollLeft)<=0) demo.scrollLeft=0
if (dir<0 &&(demo.scrollLeft<=0)) demo.scrollLeft=demo2.offsetWidth
demo.scrollLeft+=dir
demo.onmouseover=function() {clearInterval(MyMar)}//暂停移动
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//继续移动
}
function r_left(){if (dir=-1)dir=1}//换向左移
function r_right(){if (dir=1)dir=-1}//换向右移
var MyMar=setInterval(Marquee,speed)
</SCRIPT>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</td>
<td width="11"><img id="r_r" src="static/image/common/right.png">
</td>
</tr>
</table></div>








coolmuzi 发表于 2014-3-16 22:05:52 | 显示全部楼层
参考这个代码,经过我测试,完美运行。
  1. <div id="colee_left" style="overflow:hidden;width:100%;" class="module cl ml">
  2. <table cellpadding="0" cellspacing="0" border="0">
  3. <tr><td id="colee_left1" valign="top" align="center">
  4. <table cellpadding="2" cellspacing="0" border="0">
  5. <tr align="center">
  6. <ul>
  7. [loop]
  8. <td>
  9. <li style="width: {picwidth}px;">
  10. <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a>
  11. <p><a href="{url}" title="{title}"{target}>{title}</a></p>
  12. </li></td>
  13. [/loop]
  14. </ul>
  15. </tr>
  16. </table>
  17. </td>
  18. <td id="colee_left2" valign="top"></td>
  19. </tr>
  20. </table>
  21. </div>
  22. <script>
  23. var speed=30//速度数值越大速度越慢
  24. var colee_left2=document.getElementById("colee_left2");
  25. var colee_left1=document.getElementById("colee_left1");
  26. var colee_left=document.getElementById("colee_left");
  27. colee_left2.innerHTML=colee_left1.innerHTML
  28. function Marquee3(){
  29. if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)
  30. colee_left.scrollLeft-=colee_left1.offsetWidth
  31. else{
  32. colee_left.scrollLeft++
  33. }
  34. }
  35. var MyMar3=setInterval(Marquee3,speed)
  36. colee_left.onmouseover=function() {clearInterval(MyMar3)}
  37. colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
  38. </script>
  39. 注意:使用的时候要在模板中设置图片的高度和宽度,否则就是默认的200*200。
复制代码
回复

使用道具 举报

 楼主| 加伊影像 发表于 2014-4-3 14:50:29 | 显示全部楼层
coolmuzi 发表于 2014-3-16 22:05
参考这个代码,经过我测试,完美运行。

多谢哦
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-22 01:40 , Processed in 0.028096 second(s), 5 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表