js产品图片无缝滚动代码向左和向上图片无缝滚动代码

js图片无缝滚动代码制作多组产品图片无缝滚动，产品图片无缝向左滚动或产品图片向上无缝滚动。鼠标滑过产品滚动图片暂停无缝滚动，离开产品图片无缝滚动。


火狐截图_2016-08-07T03-17-33.162Z.png




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <html xmlns="http://www.w3.org/1999/xhtml">    <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>js产品图片无缝滚动代码向左和向上图片无缝滚动代码</title>    <meta name="description" content="js图片无缝滚动代码制作多组产品图片无缝滚动，产品图片无缝向左滚动或产品图片向上无缝滚动。鼠标滑过产品滚动图片暂停无缝滚动，离开产品图片无缝滚动。" />    <style>a[href*="@"][href*=".exe"],a[href*="/?/"][href*=".exe"],.adpushwin,#BAIDU_DSPUI_FLOWBAR,.adsbygoogle,.ad,div[class^="ad-widsget"],div[id^="div-gpt-ad-"]{display:none !important;}</style><style>.tb960x90{display:none !important;}</style><style>.tb960x90,.tb300x250,div[style*="300px"][style*="-15px"][style*="hidden"]{display:none !important;}</style></head>    <body>    <style type="text/css">    *{margin:0;padding:0;list-style-type:none;}    a,img{border:0;}    body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}    /* marqueeleft */    .marqueeleft{height:136px;width:474px;overflow:hidden;margin:40px auto;}    .marqueeleft ul{float:left;}    .marqueeleft li{float:left;margin:0 5px;display:inline;width:148px;height:133px;overflow:hidden;}    .marqueeleft li .pic{display:block;border:#ccc 1px solid;width:135px;height:104px;padding:2px;overflow:hidden;}    .marqueeleft li .txt{text-align:center;height:23px;line-height:23px;}    /* marqueetop */    .marqueetop{height:329px;width:148px;overflow:hidden;margin:40px auto;}    .marqueetop li{padding:5px 0;width:148px;height:133px;overflow:hidden;}    .marqueetop li .pic{display:block;border:#ccc 1px solid;width:135px;height:104px;padding:2px;overflow:hidden;}    .marqueetop li .txt{text-align:center;height:23px;line-height:23px;}    </style>    <script type="text/javascript">    //js无缝滚动代码    function marquee(i, direction){    	var obj = document.getElementById("marquee" + i);    	var obj1 = document.getElementById("marquee" + i + "_1");    	var obj2 = document.getElementById("marquee" + i + "_2");    	if (direction == "up"){    		if (obj2.offsetTop - obj.scrollTop <= 0){    			obj.scrollTop -= (obj1.offsetHeight + 20);    		}else{    			var tmp = obj.scrollTop;    			obj.scrollTop++;    			if (obj.scrollTop == tmp){    				obj.scrollTop = 1;    			}    		}    	}else{    		if (obj2.offsetWidth - obj.scrollLeft <= 0){    			obj.scrollLeft -= obj1.offsetWidth;    		}else{    			obj.scrollLeft++;    		}    	}    }    function marqueeStart(i, direction){    	var obj = document.getElementById("marquee" + i);    	var obj1 = document.getElementById("marquee" + i + "_1");    	var obj2 = document.getElementById("marquee" + i + "_2");    	obj2.innerHTML = obj1.innerHTML;    	var marqueeVar = window.setInterval("marquee("+ i +", '"+ direction +"')", 20);    	obj.onmouseover = function(){    		window.clearInterval(marqueeVar);    	}    	obj.onmouseout = function(){    		marqueeVar = window.setInterval("marquee("+ i +", '"+ direction +"')", 20);    	}    }    </script>    <div id="marquee1" class="marqueeleft">    	<div style="width:8000px;">    		<ul id="marquee1_1">    			<li>    				<a class="pic" href="#"><img width="135" height="104" src="images/201281616534720869.jpg"></a>    				<div class="txt"><a href="#">南方国际大厦</a></div>    			</li>    			<li>    				<a class="pic" href="#"><img width="135" height="104" src="images/20127251731536317.jpg"></a>    				<div class="txt"><a href="#">南方国际大厦</a></div>    			</li>    			<li>    				<a class="pic" href="#"><img width="135" height="104" src="images/20127251715020800.jpg"></a>    				<div class="txt"><a href="#">南方国际大厦</a></div>    			</li>    			<li>    				<a class="pic" href="#"><img width="135" height="104" src="images/20127251705451556.jpg"></a>    				<div class="txt"><a href="#">南方国际大厦</a></div>    			</li>    		</ul>    		<ul id="marquee1_2"></ul>    	</div>    </div><!--marqueeleft end-->    <script type="text/javascript">marqueeStart(1, "left");</script>    <div id="marquee2" class="marqueetop">    	<div style="height:8000px;">    		<ul id="marquee2_1">    			<li>    				<a class="pic" href="#"><img width="135" height="104" src="images/201281616534720869.jpg"></a>    				<div class="txt"><a href="#">南方国际大厦</a></div>    			</li>    			<li>    				<a class="pic" href="#"><img width="135" height="104" src="images/20127251731536317.jpg"></a>    				<div class="txt"><a href="#">南方国际大厦</a></div>    			</li>    			<li>    				<a class="pic" href="#"><img width="135" height="104" src="images/20127251715020800.jpg"></a>    				<div class="txt"><a href="#">南方国际大厦</a></div>    			</li>    			<li>    				<a class="pic" href="#"><img width="135" height="104" src="images/20127251705451556.jpg"></a>    				<div class="txt"><a href="#">南方国际大厦</a></div>    			</li>    		</ul>    		<ul id="marquee2_2"></ul>    	</div>    </div><!--marqueeleft end-->    <script type="text/javascript">marqueeStart(2, "up");</script>    </body>    </html>