圖片無縫滾動代碼(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;"><br /><div id="imgbox1" style="float:left;width:1000%"><br /><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"><br /><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"><br /><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"><br /><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"><br /><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"><br /><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"><br /><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"><br /><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"><br /><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"><br /><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"><br /></div><br /><div id="imgbox2" style="float:left" mce_style="float:left"></div><br /></div>

[javascript]
view plaincopyprint?

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.onmouseover=function(){clearInterval(MyMar)}  
16. imgbox.onmouseout=function(){MyMar=setInterval(Marquee,speed)}  
17. // --></mce:script>  

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

分享到：