以下是 jquery带分页数字左右按钮特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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带分页数字左右按钮</title>
<link href="images/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="images/jquery.1.4.2-min.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);
var products = $("#limit-buy .products").hide().eq(lb_cur-1).show(),
ta = products.find("textarea");
if(ta.length){
products.html(ta.val());
}
}
lb_timer = setInterval(function(){
lb_cur++;
showLimitBuyProducts();
}, 4000);
$("#J-lbn .prev, #J-lb .btn-prev").click(function(){
lb_cur--;
showLimitBuyProducts();
});
$("#J-lbn .next, #J-lb .btn-next").click(function(){
lb_cur++;
showLimitBuyProducts();
});
$("#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();
}, 10000);
$("#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>限时抢购</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="#" target="_blank"><img src="images/01.jpg" alt="欧利萨斯 潮流秋冬新品棉鞋休闲男鞋保暖高帮工装男靴子马丁靴 8379 黑色" /></a></p>
<p class="name"><a href="#" target="_blank">欧利萨斯 潮流秋冬新品棉鞋休闲男鞋保暖高帮工装男靴子马丁靴 8379 黑色</a></p>
<p class="price">￥358.00</p>
</li>
<li>
<p class="pic"><a href="#" target="_blank"><img src="images/02.jpg" alt="泸州老窖传世窖（A5）( 两瓶套装))52度" /></a></p>
<p class="name"><a href="#" 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>
</body>
</html>
CSS代码(style.css):
@charset "utf-8";/* reset */
img{vertical-align:middle;}
a,img{border:0;}
a,a:visited{color:#5e5e5e;text-decoration:none;}
a:hover{color:#4183C4;text-decoration:underline;}
分享到QQ
分享到微博
微信扫一扫
