图片无缝滚动代码(DIV+CSS+JavaScript)

1. <div id="imgbox" style="height:110px;width:600px;overflow:hidden;">  
2.     <div id="imgbox1" style="float:left;width:1000%">  
3.         <img src="http://www.guhongtao.com/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
4.         <img src="http://www.guhongtao.comintl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
5.         <img src="http://www.guhongtao.com/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
6.         <img src="http://www.guhongtao.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
7.         <img src="http://www.guhongtao.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
8.         <img src="http://www.guhongtao.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
9.         <img src="http://www.guhongtao.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
10.         <img src="http://www.guhongtao.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
11.         <img src="http://www.guhongtao.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
12.         <img src="http://www.guhongtao.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif">     
13.     </div>  
14.     <div id="imgbox2" style="float:left" mce_style="float:left"></div>  
15. </div>  

<div id="imgbox" style="height:110px;width:600px;overflow:hidden;"> <div id="imgbox1" style="float:left;width:1000%"> <img src="http://www.guhongtao.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif"> <img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif"> <img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif"> <img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif"> <img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif"> <img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif"> <img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif"> <img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif"> <img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif"> <img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif" mce_src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif"> </div> <div id="imgbox2" style="float:left" mce_style="float:left"></div> </div>

[javascript] view plain copy print ?

1. <mce:script type="text/javascript"><!--  
2. var speed=30;  
3. var imgbox=document.getElementById("imgbox");  
4. var imgbox1=document.getElementById("imgbox1");  
5. var imgbox2=document.getElementById("imgbox2");  
6. imgbox2.innerHTML=imgbox1.innerHTML;  
7. function Marquee(){  
8.  if(imgbox2.offsetWidth-imgbox.scrollLeft<=0)  
9.   imgbox.scrollLeft-=imgbox1.offsetWidth;  
10.  else{  
11.   imgbox.scrollLeft++;  
12.  }  
13. }  
14. var MyMar=setInterval(Marquee,speed);  
15. imgbox.οnmοuseοver=function(){clearInterval(MyMar)}  
16. imgbox.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed)}  
17. // --></mce:script>  

<mce:script type="text/javascript"><!-- var speed=30; var imgbox=document.getElementById("imgbox"); var imgbox1=document.getElementById("imgbox1"); var imgbox2=document.getElementById("imgbox2"); imgbox2.innerHTML=imgbox1.innerHTML; function Marquee(){ if(imgbox2.offsetWidth-imgbox.scrollLeft<=0) imgbox.scrollLeft-=imgbox1.offsetWidth; else{ imgbox.scrollLeft++; } } var MyMar=setInterval(Marquee,speed); imgbox.οnmοuseοver=function(){clearInterval(MyMar)} imgbox.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed)} // --></mce:script>

分享到：