WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>前端特效>>JS图片无缝连续滚动,JS+Marquee无缝滚动代码

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

[ 录入者:91ctc | 时间:2015-06-06 10:35:17 | 作者: 91ctc| 来源:本站原创 | 浏览: 次 ]

我们都知道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版本的好的多,而且代码可读性好。

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号