javascriot 图片无缝左右滚动效果
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>向上下左右不间断无缝滚动图片的效果（兼容火狐和IE）</title></head><body><!--下面是向上滚动代码--><!--下面是向右滚动代码--><a href="javascript:left();">左</a><div id="left"><div id="jsweb8_cn_right" style="overflow:hidden;width:500px;display:none;"><table cellpadding="0" cellspacing="0" border="0"><tr><td id="jsweb8_cn_right1" valign="top" align="center"><table cellpadding="2" cellspacing="0" border="0"><tr align="center"><td><img src="1.jpg"></td><td><img src="2.jpg"></td><td><img src="3.jpg"></td><td><img src="4.jpg"></td><td><img src="5.jpg"></td></tr></table></td><td id="jsweb8_cn_right2" valign="top"></td></tr></table></div><!--下面是向左滚动代码--><div id="jsweb8_cn_left" style="overflow:hidden;width:500px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td id="jsweb8_cn_left1" valign="top" align="center"><table cellpadding="2" cellspacing="0" border="0"><tr align="center"><td><img src="1.jpg"></td><td><img src="2.jpg"></td><td><img src="3.jpg"></td><td><img src="4.jpg"></td><td><img src="5.jpg"></td><td><img src="7.jpg" width="88"></td><td><img src="6.jpg"></td></tr></table></td><td id="jsweb8_cn_left2" valign="top"></td></tr></table></div> </div><a href="javascript:right();">右</a><script>var speed=30//速度数值越大速度越慢jsweb8_cn_right2.innerHTML=jsweb8_cn_right1.innerHTMLfunction Marquee4(){if(jsweb8_cn_right.scrollLeft<=0)jsweb8_cn_right.scrollLeft+=jsweb8_cn_right2.offsetWidthelse{jsweb8_cn_right.scrollLeft--}}var MyMar4=setInterval(Marquee4,speed)jsweb8_cn_right.onmouseover=function() {clearInterval(MyMar4)}jsweb8_cn_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}////jsweb8_cn_left2.innerHTML=jsweb8_cn_left1.innerHTMLfunction Marquee3(){if(jsweb8_cn_left2.offsetWidth-jsweb8_cn_left.scrollLeft<=0)jsweb8_cn_left.scrollLeft-=jsweb8_cn_left1.offsetWidthelse{jsweb8_cn_left.scrollLeft++}}var MyMar3=setInterval(Marquee3,speed)jsweb8_cn_left.onmouseover=function() {clearInterval(MyMar3)}jsweb8_cn_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)} function left(){ if(document.getElementById('jsweb8_cn_left').style.display=='none'){document.getElementById('jsweb8_cn_right').style.display='none';document.getElementById('jsweb8_cn_left').style.display='block'}}function right(){ if(document.getElementById('jsweb8_cn_right').style.display=='none'){document.getElementById('jsweb8_cn_left').style.display='none';document.getElementById('jsweb8_cn_right').style.display='block';}}</script><!--向右滚动代码结束--></body></html>
页:
[1]