简约漂亮的图片滚动代码

代码简介：

精美的JS图片水平向左滚动，设计的比较好，看上去视觉效果很不错。

代码内容：

View Code

<! 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 >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 简约漂亮的图片滚动代码 - www.webdm.cn </ title >
</ head >
< body >
< style  type ="text/css" >
<!--
#demo  {
background :  #FFF ;
overflow : hidden ;
border :  1px dashed #CCC ;
width :  500px ;
}
#demo img  {
border :  3px solid #F2F2F2 ;
}
#indemo  {
float :  left ;
width :  800% ;
}
#demo1  {
float :  left ;
}
#demo2  {
float :  left ;
}
-->
</ style >
< div  id ="demo" >
< div  id ="indemo" >
< div  id ="demo1" >
< a  href ="/" >< img  src ="http://www.webdm.cn/themes/pic/webdm_logo.gif"  border ="0"   /></ a >
< a  href ="/" >< img  src ="http://www.webdm.cn/themes/pic/webdm_logo.gif"  border ="0"   /></ a >
< a  href ="/" >< img  src ="http://www.webdm.cn/themes/pic/webdm_logo.gif"  border ="0"   /></ a >
< a  href ="/" >< img  src ="http://www.webdm.cn/themes/pic/webdm_logo.gif"  border ="0"   /></ a >
< a  href ="/" >< img  src ="http://www.webdm.cn/themes/pic/webdm_logo.gif"  border ="0"   /></ a >
< a  href ="/" >< img  src ="http://www.webdm.cn/themes/pic/webdm_logo.gif"  border ="0"   /></ a >
</ div >
< div  id ="demo2" ></ div >
</ div >
</ div >
< script >
<!--
var  speed = 10 ;
var  tab = document.getElementById( " demo " );
var  tab1 = document.getElementById( " demo1 " );
var  tab2 = document.getElementById( " demo2 " );
tab2.innerHTML = tab1.innerHTML;
function  Marquee(){
if (tab2.offsetWidth - tab.scrollLeft <= 0 )
tab.scrollLeft -= tab1.offsetWidth
else {
tab.scrollLeft ++ ;
}
}
var  MyMar = setInterval(Marquee,speed);
tab.onmouseover = function () {clearInterval(MyMar)};
tab.onmouseout = function () {MyMar = setInterval(Marquee,speed)};
-->
</ script >
</ body >
</ html >
< br  />
< p >< a  href ="http://www.webdm.cn" > 网页代码站 </ a >  - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！ </ p >
代码来自：http://www.webdm.cn/webcode/9f28bc2b-9113-4f87-bdf4-696bb20ac166.html

 

转载于:https://www.cnblogs.com/webdm/archive/2011/09/01/2161552.html