可用于产品展示的匀速图片滚动代码

代码简介：

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

代码内容：

View Code

< HTML >
< HEAD >
< TITLE > 可用于产品展示的匀速图片滚动代码_网页代码站(www.webdm.cn) </ TITLE >
< style >
P  {
    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 >< a  href ="http://www.webdm.cn" > 网页代码站 </ a >  - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！ </ p >
代码来自：http://www.webdm.cn/webcode/e72fe4a0-ede8-49da-ad75-3a4481629a6c.html

 

转载于:https://www.cnblogs.com/webdm/archive/2011/08/16/2140102.html