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
  • 相关阅读:
    Delphi 获取不重复随机数《LceMeaning》
    轻松一下
    MS SQL字段类型详解《转》
    Go语言优势与劣势
    go语言特点
    初始go语言
    django 短链接改成长连接
    extjs [1]
    Supervisor安装与配置
    InfluxDB命令使用
  • 原文地址:https://www.cnblogs.com/webdm/p/2140102.html
Copyright © 2011-2022 走看看