下载了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>