利用jquery实现图片无缝滚动

代码结构

1. 引入CSS

<link href="css/style.css" type="text/css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>

3. HTML代码

<div class="headeline"></div>
<!--演示内容开始-->
<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:429px;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="http://51qianduan.com/"><img width="135" height="104" src="images/201281616534720869.jpg"></a>
				<div class="txt"><a href="http://51qianduan.com/">南方国际大厦</a></div>
			</li>
			<li>
				<a class="pic" href="http://51qianduan.com/"><img width="135" height="104" src="images/20127251731536317.jpg"></a>
				<div class="txt"><a href="http://51qianduan.com/">南方国际大厦</a></div>
			</li>
			<li>
				<a class="pic" href="http://51qianduan.com/"><img width="135" height="104" src="images/20127251715020800.jpg"></a>
				<div class="txt"><a href="http://51qianduan.com/">南方国际大厦</a></div>
			</li>
			<li>
				<a class="pic" href="http://51qianduan.com/"><img width="135" height="104" src="images/20127251705451556.jpg"></a>
				<div class="txt"><a href="http://51qianduan.com/">南方国际大厦</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="http://51qianduan.com/"><img width="135" height="104" src="images/201281616534720869.jpg"></a>
				<div class="txt"><a href="http://51qianduan.com/">南方国际大厦</a></div>
			</li>
			<li>
				<a class="pic" href="http://51qianduan.com/"><img width="135" height="104" src="images/20127251731536317.jpg"></a>
				<div class="txt"><a href="http://51qianduan.com/">南方国际大厦</a></div>
			</li>
			<li>
				<a class="pic" href="http://51qianduan.com/"><img width="135" height="104" src="images/20127251715020800.jpg"></a>
				<div class="txt"><a href="http://51qianduan.com/">南方国际大厦</a></div>
			</li>
			<li>
				<a class="pic" href="http://51qianduan.com/"><img width="135" height="104" src="images/20127251705451556.jpg"></a>
				<div class="txt"><a href="http://51qianduan.com/">南方国际大厦</a></div>
			</li>
		</ul>
		<ul id="marquee2_2"></ul>
	</div>
</div><!--marqueeleft end-->
<script type="text/javascript">marqueeStart(2, "up");</script>
<!--演示内容结束-->
<div style="text-align:center;clear:both">
</div>