JS图片无缝连续滚动，JS+Marquee无缝滚动代码

我们都知道marquee可以实现页面元素的滚动，可以实现图片滚动也可以实现文字滚动，但是默认marquee滚动是全局滚动，只有当其中的元素全部“滚完”才重新再开始滚，这样如果是图片的话，在最后一个图片滚完之前，页面上会出现间断，并且出现空白，严重影响用户体验。

下面分享一个小编经常使用的图片无缝滚动（不间断滚动）效果，原理是使用javascript控制marquee的滚动属性，下面直接给出代码，分为table版和div版，供读者自己选用。看演示效果：

table版无缝滚动

点击查看效果

<div id="demo" style="OVERFLOW: hidden; WIDTH: 700px; HEIGHT: 171px">
	<table height="175" border="0" align="left" cellpadding="0" cellspace="0">
        <tr>
        <td width="700" height="171" valign="top" id="demo1">
			<table width="688" height="164" border="0" cellpadding="0" cellspacing="0">
				<tr>				 				
				  <td colspan="4" align="center">				  
				  <table width="122" border="0" cellpadding="5" cellspacing="1" bordercolor="#ddffff" bgcolor="#cccccc">					
					  <tr>
						<td width="122" align="center" bgcolor="#ffffff"><a href="http://www.91ctc.com/" target="_blank" title="8"><img src="images/1.jpg" border="0" height="124" width="179" /></a></td>
					  </tr>
				  </table> 
				  <table width="150" height="20" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td align="center" valign="bottom">8</td>
                    </tr>
                  </table>				  
				  </td>
				  <td colspan="4" align="center">				  
				  <table width="122" border="0" cellpadding="5" cellspacing="1" bordercolor="#ddffff" bgcolor="#cccccc">
					  <tr>
						<td width="122" align="center" bgcolor="#ffffff"><a href="http://www.91ctc.com/" target="_blank" title="7"><img src="images/1.jpg" border="0" height="124" width="179" /></a></td>
					  </tr>
				  </table> 
				  <table width="150" height="20" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td align="center" valign="bottom">7</td>
                    </tr>
                  </table>				  
				  </td>
				  <td colspan="4" align="center">				  
				  <table width="122" border="0" cellpadding="5" cellspacing="1" bordercolor="#ddffff" bgcolor="#cccccc">
					  <tr>
						<td width="122" align="center" bgcolor="#ffffff"><a href="http://www.91ctc.com/" target="_blank" title="121"><img src="images/1.jpg" border="0" height="124" width="179" /></a></td>
					  </tr>
				  </table> 
				  <table width="150" height="20" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td align="center" valign="bottom">121</td>
                    </tr>
                  </table>				  
				  </td>
				  <td colspan="4" align="center">				  
				  <table width="122" border="0" cellpadding="5" cellspacing="1" bordercolor="#ddffff" bgcolor="#cccccc">
					  <tr>
						<td width="122" align="center" bgcolor="#ffffff"><a href="http://www.91ctc.com/" target="_blank" title="3231"><img src="images/1.jpg" border="0" height="124" width="179" /></a></td>
					  </tr>
				  </table> 
				  <table width="150" height="20" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td align="center" valign="bottom">3231</td>
                    </tr>
                  </table>				  
				  </td>
				</tr>
			</table>
		</td>
        <td valign="top" id="demo2">&nbsp;</td>
        </tr>
    </table>
</div>
<script>
	var speed=30 //速度数值越大速度越慢,图片数目一定要达到一定数目
	demo2.innerHTML=demo1.innerHTML
	function Marquee(){
	if(demo2.offsetWidth-demo.scrollLeft<=0)
	demo.scrollLeft-=demo1.offsetWidth
	else{
	demo.scrollLeft++
	}
	}
	var MyMar=setInterval(Marquee,speed)
	demo.onmouseover=function() {clearInterval(MyMar)}
	demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

DIV版无缝滚动

点击查看效果

<style>
/*滚动区域*/
.marquee_border { width:980px; height:170px;border:1px #e5e5e5 solid; background-color:#FFFFFF}
.addfav_nenu { width:980px; height:27px; background:url(../images/addfav_menu_46.gif) no-repeat;}
.marquee_image { width:960px; height:124px; margin-top:10px;}
#demo{ width:960px; height:124px; overflow:hidden;}
#indemo{ float:left;width:800%; height:124px;}
#demo1 {float: left; height:124px;}
#demo2 {float: left;}
.img_contain{ float:left; height:124px; width:152px; text-align:center; padding-left:4px; padding-right:4px;}
</style>
<div class="marquee_image c">
	<!--滚动开始-->			 
	<div id="demo">
		<div id="indemo">
			<div id="demo1">											
				<div class="img_contain"><img src="images/1.jpg" width="138" height="120" border="0" /></div>
				<div class="img_contain"><img src="images/1.jpg" width="138" height="120" border="0" /></div>
				<div class="img_contain"><img src="images/1.jpg" width="138" height="120" border="0" /></div>
				<div class="img_contain"><img src="images/1.jpg" width="138" height="120" border="0" /></div>
				<div class="img_contain"><img src="images/1.jpg" width="138" height="120" border="0" /></div>
				<div class="img_contain"><img src="images/1.jpg" width="138" height="120" border="0" /></div>
				<div class="img_contain"><img src="images/1.jpg" width="138" height="120" border="0" /></div>
				<div class="img_contain"><img src="images/1.jpg" width="138" height="120" border="0" /></div>
				<div class="img_contain"><img src="images/1.jpg" width="138" height="120" border="0" /></div>
				<div class="img_contain"><img src="images/1.jpg" width="138" height="120" border="0" /></div>
				<div class="img_contain"><img src="images/1.jpg" width="138" height="120" border="0" /></div>
				<div class="img_contain"><img src="images/1.jpg" width="138" height="120" border="0" /></div>
			</div>
			<div id="demo2"></div>
		</div>					
	</div>				
	<script>
	var speed=40
	var demo=document.getElementById("demo");
	var demo2=document.getElementById("demo2");
	var demo1=document.getElementById("demo1");
	demo2.innerHTML=demo1.innerHTML
	function Marquee(){
	  if(demo2.offsetWidth-demo.scrollLeft<=0)
	  demo.scrollLeft-=demo1.offsetWidth
	  else{
	  demo.scrollLeft++
	  }
	  }
	var MyMar=setInterval(Marquee,speed)
	demo.onmouseover=function() {clearInterval(MyMar)}
	demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
	</script>				
	<!--滚动结束-->
</div>

可见，DIV版本的代码量明显比table版本的好的多，而且代码可读性好。