以下是 图片列表滚动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 rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".yScrollListTitle h1").click(function () {
var index=$(this).index(".yScrollListTitle h1");
$(this).addClass("yth1click").siblings().removeClass("yth1click");
$($(".yScrollListInList")[index]).show().siblings().hide();
})
$(".yScrollListInList1 ul").css({width:$(".yScrollListInList1 ul li").length*(160+84)+"px"});
$(".yScrollListInList2 ul").css({width:$(".yScrollListInList2 ul li").length*(160+84)+"px"});
var numwidth=(160+84)*5;
$(".yScrollListInList .yScrollListbtnl").click(function(){
var obj=$(this).parent(".yScrollListInList").find("ul");
if (!(obj.is(":animated"))) {
var lefts=parseInt(obj.css("left").slice(0,-2));
if(lefts<30){
obj.animate({left:lefts+numwidth},1000);
}
}
})
$(".yScrollListInList .yScrollListbtnr").click(function(){
var obj=$(this).parent(".yScrollListInList").find("ul");
var objcds=-(30+(Math.ceil(obj.find("li").length/5)-2)*numwidth);
if (!(obj.is(":animated"))) {
var lefts=parseInt(obj.css("left").slice(0,-2));
if(lefts>objcds){
obj.animate({left:lefts-numwidth},1000);
}
}
})
})
</script>
</head>
<body>
<div class="yScrollList">
<div class="yScrollListTitle"><h1 class="yth1click">人气排行</h1><h1 class="ytitleh12">新品上架</h1></div>
<div class="yScrollListIn">
<div class="yScrollListInList yScrollListInList1" style="display:block;">
<ul>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>剩余88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>剩余88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>剩余88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>剩余88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>剩余88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>剩余88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>剩余88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>剩余88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>剩余88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>剩余88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>剩余88人次</span>
</a>
</li>
</ul>
<div class="yScrollListbtn yScrollListbtnl"></div>
<div class="yScrollListbtn yScrollListbtnr"></div>
</div>
<div class="yScrollListInList yScrollListInList2">
<ul>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>总需88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>总需88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>总需88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>总需88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>总需88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>总需88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>总需88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>总需88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>总需88人次</span>
</a>
</li>
<li>
<a href="">
<img src="images/inimg.jpg">
<p>TP-LINK TL-WN725N 微型150M无线USB网卡</p>
<span>总需88人次</span>
</a>
</li>
</ul>
<div class="yScrollListbtn yScrollListbtnl"></div>
<div class="yScrollListbtn yScrollListbtnr"></div>
</div>
</div>
</div>
</body>
</html>
CSS代码(style.css):
@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:14px/180% Arial,Helvetica,sans-serif,"新宋体";}
.yScrollList{width:1198px;height:263px;border:1px solid #dcdcdc;background:#ffffff;margin:25px auto 0;}
.yScrollListTitle{width:100%;height:38px;line-height:38px;border-bottom:1px solid #dcdcdc;}
.yScrollListTitle h1{cursor:pointer;font-size:16px;background:#fff;color:#666666;height:38px;border-left:1px solid #dcdcdc;border-right:1px solid #dcdcdc;float:left;position:relative;left:-1px;width:110px;text-align:center;}
.yScrollListTitle h1.ytitleh12{left:-2px;}
.yScrollListTitle h1.yth1click{height:42px;border-top:2px solid #e9630a;top:-5px;}
.yScrollListIn{width:100%;height:224px;position:relative;}
.yScrollListInList{display:none;width:1138px;height:224px;position:absolute;padding:0 30px;left:0;top:0;overflow:hidden;}
.yScrollListInList .yScrollListbtn{cursor:pointer;position:absolute;width:13px;height:19px;top:96px;background:url(../images/btnys.png) no-repeat 0 0;}
.yScrollListInList .yScrollListbtnr{background-position:-14px 0;right:5px;}
.yScrollListInList .yScrollListbtnl{left:5px;}
.yScrollListInList ul{width:2238px;height:224px;position:absolute;top:0;left:30px;overflow:hidden;}
.yScrollListInList ul li{width:160px;height:224px;float:left;margin-right:84px;}
.yScrollListInList ul li img{width:140px;height:140px;display:block;margin-left:10px;margin-top:12px;}
.yScrollListInList ul li p{text-align:center;font-size:12px;color:#666666;line-height:18px;padding:7px 10px 0;width:140px;height:36px;overflow:hidden;}
.yScrollListInList ul li p:hover{color:#e9630a;text-decoration:underline;}
.yScrollListInList ul li span{color:#e9630a;font-size:12px;text-align:center;display:block;line-height:24px;}
分享到QQ
分享到微博
微信扫一扫
