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

<div id="imgbox" style="height:110px;width:600px;overflow:hidden;">
<div id="imgbox1" style="float:left;width:1000%">
<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">
<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">
<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">
<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.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.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.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.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.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.guhongtao.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 plaincopyprint?

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

分享到：