利用jquery實現圖片無縫滾動



19 72 25



特效描述:利用jquery實現 圖片無縫滾動,利用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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 自動滾動圖片輪播 滑動星星打分 其他 圖片滾動 圖片滾動條 鼠標滑過 鼠標懸停 跟隨鼠標移動
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子