首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

javascriot 图片无缝上下滚动效果

2012-10-24 
javascriot 图片无缝左右滚动效果headmeta http-equivContent-Type contenttext/html charsetgb

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.innerHTML  function Marquee4(){  if(jsweb8_cn_right.scrollLeft<=0)  jsweb8_cn_right.scrollLeft+=jsweb8_cn_right2.offsetWidth  else{  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.innerHTML  function Marquee3(){  if(jsweb8_cn_left2.offsetWidth-jsweb8_cn_left.scrollLeft<=0)  jsweb8_cn_left.scrollLeft-=jsweb8_cn_left1.offsetWidth  else{  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> 

?

热点排行