hafid 发表于 2008-10-4 12:23:24

发一个左右方向无缝滚动的js源代码，兼容ie，firefox，兼容w3c标准

分享一段一个左右方向无缝滚动的js源代码，兼容ie，firefox，兼容w3c标准。班门弄斧，大家多多指教！
昨天帮客户修改一个网站，需要一个左右无缝滚动图片的效果，在网上搜索一些源代码，也试了一些，但是都不符合我的要求，左右方向无缝滚动，兼容firefox，符合w3c标准。
所以没有办法，只有自己深入研究一下，经过一段调试终于成功了，在IE7和firefox3.0下面可以正常运行，遵循Xhtml 1.0 标准,但部分代码不是很规范，:-)。其他浏览器没有专门测试。在这里和大家分享一下，如有不足的地方欢迎大家批评指正，毕竟js方面我还不是很精通，但不用怀疑，这段代码绝对能用，:-)。


源代码下载地址：左右无缝滚动 兼容firefox W3C 标准 js 源代码大小：2,049 字节

hafid 发表于 2008-10-5 15:26:51

为了方便，把核心代码贴出来

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=GB2312">
<META content="MSHTML 6.00.6000.20815" name=GENERATOR></HEAD>
<BODY leftMargin=0 topMargin=0 marginwidth="0" marginheight="0">
<DIV align=left>
<TABLE cellSpacing=0 cellPadding=0 align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD class=border01 align=middle>
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 815px">
<TABLE height=100 cellSpacing=0 cellPadding=0 align=center border=0
      cellspace="0">
<TBODY>
<TR>
<TD id=marquePic1 vAlign=top align=middle height=100>
<TABLE height=100 cellSpacing=1 cellPadding=0 width=815 border=0>
<TBODY>
<TR align=middle>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843172847.jpg" mce_src="images/200843172847.jpg" width=153 border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/20084317340383.jpg" mce_src="images/20084317340383.jpg" width=153 border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843173529652.jpg" mce_src="images/200843173529652.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843173633873.jpg" mce_src="images/200843173633873.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843173727600.jpg" mce_src="images/200843173727600.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843173946787.jpg" mce_src="images/200843173946787.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843174056740.jpg" mce_src="images/200843174056740.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843174213307.jpg" mce_src="images/200843174213307.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843174335514.jpg" mce_src="images/200843174335514.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843174433450.jpg" mce_src="images/200843174433450.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843174539975.jpg" mce_src="images/200843174539975.jpg" width=153
border=0></A></TD>
<TD><A href="http://www.hbsem.cn" mce_href="http://www.hbsem.cn"
                  target=_blank><IMG height=97 alt="http://www.hbsem.cn 搜索营销博客"
                  src="images/200843174648990.jpg" mce_src="images/200843174648990.jpg" width=153
              border=0></A></TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD id=marquePic2 vAlign=top>
            </TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>

<SCRIPT language=Javascript>
<!--
var speed=30;
var FGDemo=document.getElementById('demo');
var FGDemo1=document.getElementById('marquePic1');
var FGDemo2=document.getElementById('marquePic2');
FGDemo2.innerHTML=FGDemo1.innerHTML;
function Marquee1(){
if(FGDemo.scrollLeft>=FGDemo1.scrollWidth){
FGDemo.scrollLeft=0;
}else{
FGDemo.scrollLeft++;
}
}
var MyMar1=setInterval(Marquee1,speed)
FGDemo.onmouseover=function() {clearInterval(MyMar1)}
FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)
}
-->
</SCRIPT>
</DIV>

</BODY></HTML>

come08 发表于 2008-10-7 14:01:23

支持一下，踩一脚，板凳

512 发表于 2008-10-16 10:02:52

感觉不错哦:)

keencamel 发表于 2008-11-17 13:56:03

支持一个  确实不错 还很实用 我正好缺少一个 来顶上吧

itboy1980 发表于 2009-4-23 16:56:28

这个在谷歌浏览器下有问题，动一会就停了

wz800 发表于 2009-8-5 18:52:30

<div class="div_linklist4_2">
                                <ul class="ul_vod">
                                        <li class="li_1"><a href="#"><img src="{$InstallDir}images/up/by_1.jpg" border="0" /></a></li>
                                        <li><a href="#">如何度过新婚之夜</a></li>
                                </ul>
                                <ul class="ul_vod">
                                        <li class="li_1"><a href="#"><img src="{$InstallDir}images/up/by_2.jpg" border="0" /></a></li>
                                        <li><a href="#">如何度过新婚之夜</a></li>
                                </ul>
                                <ul class="ul_vod">
                                        <li class="li_1"><a href="#"><img src="{$InstallDir}images/up/by_3.jpg" border="0" /></a></li>
                                        <li><a href="#">如何度过新婚之夜</a></li>
                                </ul>
                                <ul class="ul_vod">
                                        <li class="li_1"><a href="#"><img src="{$InstallDir}images/up/by_4.jpg" border="0" /></a></li>
                                        <li><a href="#">如何度过新婚之夜</a></li>
                                </ul>
                                <ul class="ul_vod">
                                        <li class="li_1"><a href="#"><img src="{$InstallDir}images/up/by_5.jpg" border="0" /></a></li>
                                        <li><a href="#">如何度过新婚之夜</a></li>
                                </ul>
                                <ul class="ul_vod">
                                        <li class="li_1"><a href="#"><img src="{$InstallDir}images/up/by_6.jpg" border="0" /></a></li>
                                        <li><a href="#">如何度过新婚之夜</a></li>
                                </ul>
                        </div>




请问div的怎么滚动？？？？？？？？？？？？？

panly03 发表于 2009-10-17 20:00:31

试了一下  的确挺好用  支持楼主把更多更好的脚本发出来给大家共享一下

jiangxi00096 发表于 2010-2-17 22:52:07

支持，学习中……

jikeytang 发表于 2010-4-20 11:41:35

这个结构真是怪吓人的，怎么不改成div的，非要table

ccsnetmeng 发表于 2010-11-15 08:54:51

确实不错

xzf 发表于 2010-12-1 09:08:12

确实很不错,收藏

zkg6655175 发表于 2011-3-11 10:24:29

挺实用的 ，谢谢奉献了哦！

生命线 发表于 2011-11-30 15:37:08

......和我收藏的那个一样，就是改了字样，是DIV的，原来是楼主的原创？

<SCRIPT language=Javascript>
<!--
var speed=30;
var FGDemo=document.getElementById('demo');
var FGDemo1=document.getElementById('marquePic1');
var FGDemo2=document.getElementById('marquePic2');
FGDemo2.innerHTML=FGDemo1.innerHTML;
function Marquee1(){
if(FGDemo.scrollLeft>=FGDemo1.scrollWidth){
FGDemo.scrollLeft=0;
}else{
FGDemo.scrollLeft++;
}
}
var MyMar1=setInterval(Marquee1,speed)
FGDemo.onmouseover=function() {clearInterval(MyMar1)}
FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)
}
-->
</SCRIPT>
页: [1]
查看完整版本: 发一个左右方向无缝滚动的js源代码，兼容ie，firefox，兼容w3c标准