zoukankan      html  css  js  c++  java
  • 可用于产品展示的匀速图片滚动代码

    代码简介:

    经过美化过的匀速图片滚动,速度在JS函数里可以自己调整,带有注释,数值越大滚动越慢。为了节省下载时间,这里的图上用文字代替了,你用的时候自己加上吧。

    代码内容:

    View Code
    <HTML>
    <HEAD>
    <TITLE>可用于产品展示的匀速图片滚动代码_网页代码站(www.webdm.cn)</TITLE>
    <style>
    {
        MARGIN
    : 20px
    }
    .table-left-right 
    {
        BORDER-LEFT
    : #E7E7E7 1px solid;
        BORDER-RIGHT
    : #E7E7E7 1px solid;
    }
    TD 
    {
        font-size
    : 12px;
    }
    .hangju 
    {
        line-height
    : 20px;
        word-spacing
    : 3pt;
    }
    .title
    {
        color
    : #000000;
        font-weight
    : bold;
    }
    .title2
    {
        color
    : #ffffff;
        font-weight
    : bold;
    }
    .title3
    {
        color
    : #000000;
        font-weight
    : bold;
    }
    </style>
    </HEAD>
    <BODY leftMargin=0 topMargin=2 marginheight="0" marginwidth="0">
    <CENTER>
      
    <TABLE 
    style="BORDER: #eeeeee 1px solid" 
    cellSpacing
    =0 cellPadding=0 width=750 align=center border=0>
      
    <TBODY>
      
    <TR>
        
    <TD>
          
    <DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
          
    <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
            
    <TBODY>
            
    <TR>
              
    <TD id=demo1 vAlign=top><table width="1710" height="116"  border="0" cellpadding="0" cellspacing="0">
                
    <tr>
                  
    <td width="171" background="http://www.webdm.cn/images/20091003/pic_bg.jpg"><div align="center">第1张</div></td>
                  
    <td width="171" background="http://www.webdm.cn/images/20091003/pic_bg.jpg"><div align="center">第2张</div></td>
                  
    <td width="171" background="http://www.webdm.cn/images/20091003/pic_bg.jpg"><div align="center">第3张</div></td>
                  
    <td width="171" background="http://www.webdm.cn/images/20091003/pic_bg.jpg"><div align="center">第4张</div></td>
                  
    <td width="171" background="http://www.webdm.cn/images/20091003/pic_bg.jpg"><div align="center">第5张</div></td>
                  
    <td width="171" background="http://www.webdm.cn/images/20091003/pic_bg.jpg"><div align="center">第6张</div></td>
                  
    <td width="171" background="http://www.webdm.cn/images/20091003/pic_bg.jpg"><div align="center">第7张</div></td>
                  
    <td width="171" background="http://www.webdm.cn/images/20091003/pic_bg.jpg"><div align="center">第8张</div></td>
                  
    <td width="171" background="http://www.webdm.cn/images/20091003/pic_bg.jpg"><div align="center">第9张</div></td>
                  
    <td width="171" background="http://www.webdm.cn/images/20091003/pic_bg.jpg"><div align="center">第10张</div></td>
                
    </tr>
              
    </table></TD>
              
    <TD id=demo2 vAlign=top>&nbsp;</TD></TR></TBODY></TABLE></DIV>
          
    <SCRIPT> 
    var speed3=25//速度,数值越大越慢
    demo2.innerHTML=demo1.innerHTML
    function Marquee(){
    if(demo2.offsetWidth-demo.scrollLeft<=0)
    demo.scrollLeft
    -=demo1.offsetWidth
    else{
    demo.scrollLeft
    ++
    }
    }
    var MyMar=setInterval(Marquee,speed3)
    demo.onmouseover
    =function() {clearInterval(MyMar)}
    demo.onmouseout
    =function() {MyMar=setInterval(Marquee,speed3)}
    </SCRIPT>
    </TD></TR></TBODY></TABLE></TD></TR></TABLE>
    </CENTER>
    </BODY>
    </HTML>
    <br />
    <p><href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
    代码来自:http://www.webdm.cn/webcode/e72fe4a0-ede8-49da-ad75-3a4481629a6c.html
  • 相关阅读:
    关于dubbo创建服务和引用服务时,会报错:cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration can be found for element 问题的解决
    解决 Maven工程运行报错Failed to clean project: Failed to delete
    Linux学习_004_使用CentOS 7.5卸载自带jdk安装自己的JDK1.8
    Linux下的JDK和OpenJDK有什么具体的区别
    常用的大数据技术有哪些?
    如何隐藏你的 Linux 的命令行历史
    Securi-Pi:使用树莓派作为安全跳板
    在 Linux 上管理加密密钥的最佳体验
    在 Linux 下使用任务管理器
    在 Linux 中安装 Lighttpd Web 服务器
  • 原文地址:https://www.cnblogs.com/webdm/p/2140102.html
Copyright © 2011-2022 走看看