常用的横向滚动商品图片广告

2008-10-28 08:43:00 | 【大中小】

10幅图片从右向左滚动，鼠标滑过时图片停止，您只需要将演示代码的文字标签换成图片就可以直接上线了，非常实用，只适用于IE

第一步：
点击这里下载源代码及演示图片

第二步：
在网页<head>区添加样式引用

<link href="css.css" rel="stylesheet" type="text/css">

第三步：
在网页<body>区添加以下代码

<CENTER>
  <TABLE 
style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 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="pic_bg.jpg"><div align="center">1</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">
                <p>2</p>
                </div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">3</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">4</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">5</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">6</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">7</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">8</div></td>
              <td width="171" background="pic_bg.jpg"><div align="center">9</div></td>
              <td width="171" background="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>

下载"常用的横向滚动商品图片广告"

推荐给朋友

上一篇：带关闭按钮的Flash对联广告
下一篇：网页右上角撕页广告效果

常用的横向滚动商品图片广告

下载"常用的横向滚动商品图片广告"

相关资源