jquery 滚动特效

下载了97站长网站的源码,实现的是商品滚动的效果,觉得有用,所以进行防止健忘记录。注释了js部分,主要是运用了setInterval(code,time) 和 clearInterval(null)来实现,间隔多少时间段去不间断执行code中的代码,code可以是函数等,然后调用clearInterval()函数去取消,后者直接关闭窗口取消

其中觉得下面几句特别有用:
1.<pre name="code" class="html">/** 隐藏所有商品信息 显示第 lb_cur-1 项 **/
var products = $("#limit-buy .products").hide().eq(lb_cur-1).show();

2.
<pre name="code" class="html">$("#J-lb .btn-prev, #J-lb .btn-next").hide();
$("#J-lb .btn-prev, #J-lb .btn-next").show();

 


 
<!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>购物网站jquery商品滚动展示效果 - 97站长网 - www.97zzw.com</title>
<link href="images/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
</head>

<body>

<div class="headeline"></div>

<!--演示内容开始-->

<script type="text/javascript">
$(document).ready(function(){
	
	var lb = $("#limit-buy"),
		lb_cur = 1,
		lbp_w = lb.find(".products").width();
		lb_timer = null;
		t = 1;

	function showLimitBuyProducts(){
		/** 滚动下标 越界 重置 **/
		if(lb_cur < 1){
			lb_cur = 4;
		} else if(lb_cur > 4){
			lb_cur = 1;
		}
		
		/** 动态显示当前滚动到第几页 **/
		$("#J-lbcp").html(lb_cur);
		
		/** 隐藏所有商品信息 显示第 lb_cur-1 项 **/
		var products = $("#limit-buy .products").hide().eq(lb_cur-1).show(),

		/**有内容(长度不为0) 然后显示长度值 **/
		ta = products.find("textarea");
		if(ta.length){
			products.html(ta.val());
		}
	}
	
	/**setInterval() 方法以毫秒为单位,不停地执行函数 ,直到clearInterval()被调用,或者窗体关闭; 
		这里代表这个function每隔 1秒执行一次**/
	lb_timer = setInterval(function(){
		lb_cur++;
		showLimitBuyProducts();
	}, 1000);
	
	/** 上一页 **/
	$("#J-lbn .prev, #J-lb .btn-prev").click(function(){
		lb_cur--;
		showLimitBuyProducts();
	});

	/** 下一页 **/
	$("#J-lbn .next, #J-lb .btn-next").click(function(){
		lb_cur++;
		showLimitBuyProducts();
	});
	
	/** 悬挂在商品滚动区域进行停止 setInterval() 方法动作 **/
	$("#J-lb").hover(function(){
			/** 方法一 鼠标进入 停止滚动 **/
			clearInterval(lb_timer);
			lb_timer = null;
			/** 上一页 下一页按钮浮现 **/
			$("#J-lb .btn-prev, #J-lb .btn-next").show();
		}, function(){
			/** 方法二 鼠标离开 开始滚动 **/
			lb_timer = setInterval(function(){
				lb_cur++;
				showLimitBuyProducts();
			}, 1000);
			/** 上一页 下一页按钮浮现 **/ 
			$("#J-lb .btn-prev, #J-lb .btn-next").hide();
	});
	
});
</script> 

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";}


.limit-box{position:relative;width:970px;margin:20px auto;height:215px;overflow:hidden;border:1px solid #e6e6e6}
/* limit-buy-hd */
.limit-buy-hd{position:relative;height:37px;background:#f8f8f8 url(images/title.gif) no-repeat 80px 0;border-bottom:1px solid #e6e6e6;line-height:37px}
.limit-buy-hd h2{float:left;overflow:hidden;display:inline;width:85px;font-size:14px;padding:0 0 0 10px;}
/* limit-buy-nav */
.limit-buy-nav{float:right;width:60px;margin:7px 10px 0 0}
.limit-buy-nav span{float:left;width:44px;height:21px;font-size:14px;line-height:21px;text-align:center}
.limit-buy-nav em{margin-right:1px;color:#ea5501;font-weight:700}
.limit-buy-nav .prev,.limit-buy-nav .next{float:left;overflow:hidden;width:8px;height:9px;margin:6px 0 0;background:url(images/arrowbg.png) no-repeat -59px -180px}
.limit-buy-nav .next{background-position:-52px -180px}
/* limit-buy-bd */
.limit-buy-bd{overflow:hidden;position:absolute;top:38px;left:0;width:9000px;z-index:1}
/* btn-prev */
.btn-prev,.btn-next{overflow:hidden;position:absolute;display:none;top:93px;width:27px;height:48px;background:url(images/arrowbg.png) no-repeat 0 0;z-index:10}
.btn-prev{left:0}
.btn-next{right:0;background-position:-40px 0}
.btn-prev:hover{background-position:0 -60px}
.btn-prev:active{background-position:0 -120px}
.btn-next:hover{background-position:-40px -60px}
.btn-next:active{background-position:-40px -120px}
/* products */
.products{float:left;width:971px}
.products li{float:left;position:relative;width:164px;height:167px;padding:10px 15px 0;}
.products li .pic{overflow:hidden;position:relative;width:120px;height:120px;margin:0 auto 4px}
.products li .pic img{width:120px;height:120px}
.products li .price{position:absolute;top:107px;right:15px;background:url(images/pricebg.gif) no-repeat;padding:6px 0 0 8px;width:74px;height:26px;line-height:26px;font-size:14px;font-weight:800;color:#fff;text-align:center}
.products li .name{overflow:hidden;height:36px;margin:0 0 2px;line-height:18px;text-align:center}
</style>
	
<div class="limit-box" id="J-lb">

	<div class="limit-buy-hd">
		<h2>97站长网</h2>
		<div class="limit-buy-nav" id="J-lbn">
			<a href="javascript:void(0)" class="prev"></a>
			<span>
				<em id="J-lbcp">1</em>/4
			</span>
			<a href="javascript:void(0)" class="next"></a>
		</div>
	</div>

	<a href="javascript:void(0);" class="btn-prev"></a>
	
	<div class="limit-buy-bd" id="limit-buy">
	
		<ul class="products">
			<li>
				<p class="pic"><a href="http://www.97zzw.com" target="_blank"><img src="images/01.jpg" alt="欧利萨斯 潮流秋冬新品棉鞋休闲男鞋保暖高帮工装男靴子马丁靴 8379 黑色" /></a></p>
				<p class="name"><a href="http://www.97zzw.com" target="_blank">欧利萨斯 潮流秋冬新品棉鞋休闲男鞋保暖高帮工装男靴子马丁靴 8379 黑色</a></p>
				<p class="price">¥358.00</p>
			</li>
			<li>
				<p class="pic"><a href="http://www.97zzw.com" target="_blank"><img src="images/02.jpg" alt="泸州老窖传世窖(A5)( 两瓶套装))52度" /></a></p>
				<p class="name"><a href="http://www.97zzw.com" target="_blank">泸州老窖传世窖(A5)( 两瓶套装))52度</a></p>
				<p class="price">¥158.00</p>
			</li>
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/03.jpg" alt="三洋(SANYO)32英寸LED电视32CE530ALED" /></a></p>
				<p class="name"><a href="#" target="_blank">三洋(SANYO)32英寸LED电视32CE530ALED</a></p>
				<p class="price">¥58.00</p>
			</li>
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/04.jpg" alt="宏碁(acer)14.0英寸笔记本电脑 V5-471G-32364G50Mabb(i3-2367M/4G/500G/14寸高清屏/DVD刻录/GT620M 1G独显/无线/蓝牙/USB3.0/Linux BE)天空蓝" /></a></p>
				<p class="name"><a href="#" target="_blank">宏碁(acer)14.0英寸笔记本电脑 V5-471G-32364G50Mabb(i3-2367M/4G/500G/14寸高清屏/DVD刻录/GT620M 1G独显/无线/蓝牙/USB3.0/Linux BE)天空蓝</a></p>
				<p class="price">¥148.00</p>
			</li>
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/05.jpg" alt="SWISSGEAR瑞士军刀超值三剑客套餐 商务拉杆箱+多功能双肩包+运动腰包" /></a></p>
				<p class="name"><a href="#" target="_blank">SWISSGEAR瑞士军刀超值三剑客套餐 商务拉杆箱+多功能双肩包+运动腰包</a></p>
				<p class="price">¥658.00</p>
			</li>
		</ul>
		
		<ul class="products">
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/06.jpg" alt="saff家纺 超柔珊瑚绒毯子 休闲多用毯 盖毯 垫毯 夏凉毯 空调毯180cm*200cm 紫" /></a></p>
				<p class="name"><a href="#" target="_blank">saff家纺 超柔珊瑚绒毯子 休闲多用毯 盖毯 垫毯 夏凉毯 空调毯180cm*200cm 紫<em></em></a></p>
				<p class="price">¥308.00</p>
			</li>
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/07.jpg" alt="美的(Midea)微波炉EG7KCGW2-NW" /></a></p>
				<p class="name"><a href="#" target="_blank">美的(Midea)微波炉EG7KCGW2-NW<em></em></a></p>
				<p class="price">¥68.00</p>
			</li>
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/08.jpg" alt="伟峰(WEIFENG)三脚架WT-3110A" /></a></p>
				<p class="name"><a href="#" target="_blank">伟峰(WEIFENG)三脚架WT-3110A<em></em></a></p>
				<p class="price">¥18.00</p>
			</li>
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/09.jpg" alt="力博得(Lebond)电动牙刷M.tic绿" /></a></p>
				<p class="name"><a href="#" target="_blank">力博得(Lebond)电动牙刷M.tic绿<em></em></a></p>
				<p class="price">¥8.00</p>
			</li>
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/10.jpg" alt="【大唐西域】干果阿妈特级精选和田枣120g*5袋 新疆特产大枣/红枣" /></a></p>
				<p class="name"><a href="#" target="_blank">【大唐西域】干果阿妈特级精选和田枣120g*5袋 新疆特产大枣/红枣<em></em></a></p>
				<p class="price">¥28.00</p>
			</li>
		</ul>

		<ul class="products">
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/05.jpg" alt="欧利萨斯 潮流秋冬新品棉鞋休闲男鞋保暖高帮工装男靴子马丁靴 8379 黑色" /></a></p>
				<p class="name"><a href="#" target="_blank">欧利萨斯 潮流秋冬新品棉鞋休闲男鞋保暖高帮工装男靴子马丁靴 8379 黑色</a></p>
				<p class="price">¥8.00</p>
			</li>
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/04.jpg" alt="泸州老窖传世窖(A5)( 两瓶套装))52度" /></a></p>
				<p class="name"><a href="#" target="_blank">泸州老窖传世窖(A5)( 两瓶套装))52度</a></p>
				<p class="price">¥18.00</p>
			</li>
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/03.jpg" alt="三洋(SANYO)32英寸LED电视32CE530ALED" /></a></p>
				<p class="name"><a href="#" target="_blank">三洋(SANYO)32英寸LED电视32CE530ALED</a></p>
				<p class="price">¥158.00</p>
			</li>
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/02.jpg" alt="宏碁(acer)14.0英寸笔记本电脑 V5-471G-32364G50Mabb(i3-2367M/4G/500G/14寸高清屏/DVD刻录/GT620M 1G独显/无线/蓝牙/USB3.0/Linux BE)天空蓝" /></a></p>
				<p class="name"><a href="#" target="_blank">宏碁(acer)14.0英寸笔记本电脑 V5-471G-32364G50Mabb(i3-2367M/4G/500G/14寸高清屏/DVD刻录/GT620M 1G独显/无线/蓝牙/USB3.0/Linux BE)天空蓝</a></p>
				<p class="price">¥68.00</p>
			</li>
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/01.jpg" alt="SWISSGEAR瑞士军刀超值三剑客套餐 商务拉杆箱+多功能双肩包+运动腰包" /></a></p>
				<p class="name"><a href="#" target="_blank">SWISSGEAR瑞士军刀超值三剑客套餐 商务拉杆箱+多功能双肩包+运动腰包</a></p>
				<p class="price">¥88.00</p>
			</li>
		</ul>
		
		<ul class="products">
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/10.jpg" alt="saff家纺 超柔珊瑚绒毯子 休闲多用毯 盖毯 垫毯 夏凉毯 空调毯180cm*200cm 紫" /></a></p>
				<p class="name"><a href="#" target="_blank">saff家纺 超柔珊瑚绒毯子 休闲多用毯 盖毯 垫毯 夏凉毯 空调毯180cm*200cm 紫<em></em></a></p>
				<p class="price">¥38.00</p>
			</li>
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/09.jpg" alt="美的(Midea)微波炉EG7KCGW2-NW" /></a></p>
				<p class="name"><a href="#" target="_blank">美的(Midea)微波炉EG7KCGW2-NW<em></em></a></p>
				<p class="price">¥98.00</p>
			</li>
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/08.jpg" alt="伟峰(WEIFENG)三脚架WT-3110A" /></a></p>
				<p class="name"><a href="#" target="_blank">伟峰(WEIFENG)三脚架WT-3110A<em></em></a></p>
				<p class="price">¥18.00</p>
			</li>
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/07.jpg" alt="力博得(Lebond)电动牙刷M.tic绿" /></a></p>
				<p class="name"><a href="#" target="_blank">力博得(Lebond)电动牙刷M.tic绿<em></em></a></p>
				<p class="price">¥38.00</p>
			</li>
			<li>
				<p class="pic"><a href="#" target="_blank"><img src="images/06.jpg" alt="【大唐西域】干果阿妈特级精选和田枣120g*5袋 新疆特产大枣/红枣" /></a></p>
				<p class="name"><a href="#" target="_blank">【大唐西域】干果阿妈特级精选和田枣120g*5袋 新疆特产大枣/红枣<em></em></a></p>
				<p class="price">¥68.00</p>
			</li>
		</ul>
		
	</div>
	
	<a href="javascript:void(0);" class="btn-next"></a>
</div>
<p align="center">适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p align="center">来源:<a href="http://97zzw.com/" target="_blank">站长素材</a></p>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值