以下是 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>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<style>
*{margin:0;padding:0;}
img{border:none;}
body{overflow-x:hidden;}
.user_timeShow_wrap{width:1920px;margin:0 auto;height:228px;background:url(img/580f6774N61c3ff89.jpg) no-repeat;}
.user_point{width:1200px;height:21px;position:relative;overflow:hidden;top:102px;_top:97px;*top:97px;margin:0 auto;left:8px;}
.user_point li{ width:11px;height:21px;float:left; list-style-type:none;margin-left:59px;}
.d-stock{display:none;}
.user_point .point{width:56px;height:55px;display:none; position:relative; }
.user_point #point1{left:83px;}
.user_point #point2{left:87px;}
.user_point #point3{left:92px;}
.user_point #point4{left:99px;}
.user_point #point5{left:103px;}
.user_point #point6{left:108px;}
.user_point #point7{left:91px;}
.user_point #point8{left:63px;}
.user_point #point9{left:38px;}
.user_point #point10{left:12px;}
.user_point #point11{left:-14px;}
.user_point #point12{left:-41px;}
.user_point #point13{left:-66px;}
.user_point #point14{left:-92px;}
.user_point #point15{left:-118px;}
.user_point #point16{left:-146px;}
.user_shockCat{ width:292px;height:295px; position:relative;overflow:hidden;top:24px;left:1289px;}
.user_shockCat a{ display:inline-block;width:292px;height:295px;}
.user_before{display:none; z-index:2;}
.user_after{z-index:1;display:none;}
</style>
<div class="user_timeShow_wrap">
<div class="user_time" id="user_time">
</div>
<ul class="user_point" id="user_point">
<li>
<a href="javascript:void(0)" class="point" id="point1" clstag="sale|keycount|16708668|1"><img src="img/5805f565Na708a365.png" alt="" width="9" height="9" /></a> <br />
</li>
<li>
<a href="javascript:void(0)" class="point" id="point2" clstag="sale|keycount|16708668|2"><img src="img/5805f565Na708a365.png" alt="" width="9" height="9" /></a> <br />
</li>
<li>
<a href="javascript:void(0)" class="point" id="point3" clstag="sale|keycount|16708668|3"><img src="img/5805f565Na708a365.png" alt="" width="9" height="9" /></a> <br />
</li>
<li>
<a href="javascript:void(0)" class="point" id="point4" clstag="sale|keycount|16708668|4"><img src="img/5805f565Na708a365.png" alt="" width="9" height="9" /></a> <br />
</li>
<li>
<a href="javascript:void(0)" class="point" id="point5" clstag="sale|keycount|16708668|5"><img src="img/5805f565Na708a365.png" alt="" width="9" height="9" /></a> <br />
</li>
<li>
<a href="javascript:void(0)" class="point" id="point6" clstag="sale|keycount|16708668|6"><img src="img/5805f565Na708a365.png" alt="" width="9" height="9" /></a> <br />
</li>
<li>
<a href="javascript:void(0)" class="point" id="point7" clstag="sale|keycount|16708668|7"><img src="img/5805f565Na708a365.png" alt="" width="9" height="9" /></a> <br />
</li>
<li>
<a href="javascript:void(0)" class="point" id="point8" clstag="sale|keycount|16708668|8"><img src="img/5805f565Na708a365.png" alt="" width="9" height="9" /></a> <br />
</li>
<li>
<a href="javascript:void(0)" class="point" id="point9" clstag="sale|keycount|16708668|9"><img src="img/5805f565Na708a365.png" alt="" width="9" height="9" /></a> <br />
</li>
<li>
<a href="javascript:void(0)" class="point" id="point10" clstag="sale|keycount|16708668|10"><img src="img/5805f565Na708a365.png" alt="" width="9" height="9" /></a> <br />
</li>
<li>
<a href="javascript:void(0)" class="point" id="point11" clstag="sale|keycount|16708668|11"><img src="img/5805f565Na708a365.png" alt="" width="9" height="9" /></a> <br />
</li>
<li>
<a href="javascript:void(0)" class="point" id="point12" clstag="sale|keycount|16708668|12"><img src="img/5805f565Na708a365.png" alt="" width="9" height="9" /></a> <br />
</li>
<li>
<a href="javascript:void(0)" class="point" id="point13" clstag="sale|keycount|16708668|13"><img src="img/5805f565Na708a365.png" alt="" width="9" height="9" /></a> <br />
</li>
<li>
<a href="javascript:void(0)" class="point" id="point14" clstag="sale|keycount|16708668|14"><img src="img/5805f565Na708a365.png" alt="" width="9" height="9" /></a> <br />
</li>
<li>
<a href="javascript:void(0)" class="point" id="point15" clstag="sale|keycount|16708668|15"><img src="img/5805f565Na708a365.png" alt="" width="9" height="9" /></a> <br />
</li>
<li>
<a href="javascript:void(0)" class="point" id="point16" clstag="sale|keycount|16708668|15"><img src="img/5805f565Na708a365.png" alt="" width="9" height="9" /></a> <br />
</li>
</ul>
<div class="user_shockCat">
<a href="javascript:void(0)" class="user_before" clstag="sale|keycount|16708668|18"><img src="img/5808202bN67e450ec.png" alt="" width="150" height="150" /></a> <a href="javascript:void(0)" class="user_after" clstag="sale|keycount|16708668|19"><img src="img/5808203cN00403380.png" alt="" width="150" height="150" /></a>
</div>
</div>
<script>$(document).ready(function() {
$('.user_before').show();
function shockCat (){
$('.user_before').hide();
$('.user_after').show();
}
function ReCat (){
$('.user_after').hide();
$('.user_before').show();
}
function picShow(object){
object.fadeIn("slow");
}
function picHide(object){
object.fadeOut("slow");
}
var Long = $(".user_point li").length;
var pIndex = 0;
var autoChange = setInterval(function(){
var pic =$(".point").eq(pIndex);
picShow(pic);
picHide(pic);
ReCat ();
if( pIndex < Long-1){
pIndex ++;
}
else {
pIndex =0;
shockCat ();
}
},100);
});
</script>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
