功能：Jquery实现ul中的li左右切换！！
Jquery代码：
<script type="text/javascript">
$(document).ready(function(){
//顾客同时看了
var num = parseInt($("#goods ul").length / 4)-1;
var numde = num;
var leftde = "";
$(".L-arrows").click(function () {
if (num < numde) {
$("#goods").animate({ left: "+=750px" });
num++;
}
});
$(".R-arrows").click(function () {
if (num != 0) {
$("#goods").animate({ left: "-=750px" });
num--;
}
else {
leftde = parseInt(750) * parseInt(numde) + "px";
leftde = "+=" + leftde;
$("#goods").animate({ left: leftde });
num = numde;
}
});
});
</script>
HTML代码：
<body>
<div style="position:relative;width:750px; height: 320px; margin: 0 auto; overflow: hidden;">
<div id="goods" style="position:absolute;width:auto; height: 320px; overflow: hidden;">
<ul>
<!--商品-->
<li class="dt"> 最近购买时间：2013-03-01<br />
购买次数：1 </li>
<li class="pic"><a href="#"><img src="img/02.gif" /></a></li>
<li class="name"><a href="#">海飞丝丝质柔滑型去屑洗发露750ml </a></li>
<li class="price"><em class="big">5</em><em class="small">¥5</em></li>
<li class="tip">满198元获赠品！</li>
<li class="sumbit"> <img src="img/minus-icon.gif" class="fl vm mt8" />
<input type="text" class="num fl vm m mt6" />
<img src="img/add-icon.gif" class="fl vm mt8" />
<input type="button" class="btn fl" value="购买" />
</li>
</ul>
<!--商品-->
<ul>
<!--商品-->
<li class="dt"> 最近购买时间：2013-03-01<br />
购买次数：1 </li>
<li class="pic"><a href="#"><img src="img/02.gif" /></a></li>
<li class="name"><a href="#">海飞丝丝质柔滑型去屑洗发露750ml </a></li>
<li class="price"><em class="big">5</em><em class="small">¥5</em></li>
<li class="tip">满198元获赠品！</li>
<li class="sumbit"> <img src="img/minus-icon.gif" class="fl vm mt8" />
<input type="text" class="num fl vm m mt6" />
<img src="img/add-icon.gif" class="fl vm mt8" />
<input type="button" class="btn fl" value="购买" />
</li>
</ul>
<!--商品-->
<ul>
<!--商品-->
<li class="dt"> 最近购买时间：2013-03-01<br />
购买次数：1 </li>
<li class="pic"><a href="#"><img src="img/02.gif" /></a></li>
<li class="name"><a href="#">海飞丝丝质柔滑型去屑洗发露750ml </a></li>
<li class="price"><em class="big">5</em><em class="small">¥5</em></li>
<li class="tip">满198元获赠品！</li>
<li class="sumbit"> <img src="img/minus-icon.gif" class="fl vm mt8" />
<input type="text" class="num fl vm m mt6" />
<img src="img/add-icon.gif" class="fl vm mt8" />
<input type="button" class="btn fl" value="购买" />
</li>
</ul>
<!--商品-->
<ul>
<!--商品-->
<li class="dt"> 最近购买时间：2013-03-01<br />
购买次数：1 </li>
<li class="pic"><a href="#"><img src="img/02.gif" /></a></li>
<li class="name"><a href="#">海飞丝丝质柔滑型去屑洗发露750ml </a></li>
<li class="price"><em class="big">5</em><em class="small">¥5</em></li>
<li class="tip">满198元获赠品！</li>
<li class="sumbit"> <img src="img/minus-icon.gif" class="fl vm mt8" />
<input type="text" class="num fl vm m mt6" />
<img src="img/add-icon.gif" class="fl vm mt8" />
<input type="button" class="btn fl" value="购买" />
</li>
</ul>
<!--商品-->
<!--商品-->
<ul>
<li class="dt"> 最近购买时间：2013-03-01<br />
购买次数：1 </li>
<li class="pic"><a href="#"><img src="img/02.gif" /></a></li>
<li class="name"><a href="#">海飞丝丝质柔滑型去屑洗发露750ml </a></li>
<li class="price"><em class="big">5</em><em class="small">¥5</em></li>
<li class="tip">满198元获赠品！</li>
<li class="sumbit"> <img src="img/minus-icon.gif" class="fl vm mt8" />
<input type="text" class="num fl vm m mt6" />
<img src="img/add-icon.gif" class="fl vm mt8" />
<input type="button" class="btn fl" value="购买" />
</li>
</ul>
<!--商品-->
<!--商品-->
<ul>
<li class="dt"> 最近购买时间：2013-03-01<br />
购买次数：1 </li>
<li class="pic"><a href="#"><img src="img/02.gif" /></a></li>
<li class="name"><a href="#">海飞丝丝质柔滑型去屑洗发露750ml </a></li>
<li class="price"><em class="big">5</em><em class="small">¥5</em></li>
<li class="tip">满198元获赠品！</li>
<li class="sumbit"> <img src="img/minus-icon.gif" class="fl vm mt8" />
<input type="text" class="num fl vm m mt6" />
<img src="img/add-icon.gif" class="fl vm mt8" />
<input type="button" class="btn fl" value="购买" />
</li>
</ul>
<!--商品-->
<!--商品-->
<ul>
<li class="dt"> 最近购买时间：2013-03-01<br />
购买次数：1 </li>
<li class="pic"><a href="#"><img src="img/02.gif" /></a></li>
<li class="name"><a href="#">海飞丝丝质柔滑型去屑洗发露750ml </a></li>
<li class="price"><em class="big">5</em><em class="small">¥5</em></li>
<li class="tip">满198元获赠品！</li>
<li class="sumbit"> <img src="img/minus-icon.gif" class="fl vm mt8" />
<input type="text" class="num fl vm m mt6" />
<img src="img/add-icon.gif" class="fl vm mt8" />
<input type="button" class="btn fl" value="购买" />
</li>
</ul>
<!--商品-->
<!--商品-->
<ul>
<li class="dt"> 最近购买时间：2013-03-01<br />
购买次数：1 </li>
<li class="pic"><a href="#"><img src="img/02.gif" /></a></li>
<li class="name"><a href="#">海飞丝丝质柔滑型去屑洗发露750ml </a></li>
<li class="price"><em class="big">5</em><em class="small">¥5</em></li>
<li class="tip">满198元获赠品！</li>
<li class="sumbit"> <img src="img/minus-icon.gif" class="fl vm mt8" />
<input type="text" class="num fl vm m mt6" />
<img src="img/add-icon.gif" class="fl vm mt8" />
<input type="button" class="btn fl" value="购买" />
</li>
</ul>
<!--商品-->
</div><!--全部商品-->
</div>
<!--全部商品隐藏区域-->
<div id="snav" style="width:600px; height: 25px; line-height: 25px; border: 1px solid #ddd; margin: 20px auto;">
<a href="#" class="L-arrows">左</a>
<a href="#" class="R-arrows">右</a>
</div>
</body>
CSS代码：
<style>
ul {
float: left;
height: 290px;
width: 165px;
display: block;
border: 3px solid #fff;
margin-top: 10px;
margin-left: 15px;
_margin-left: 7px;
list-style-type:none;
padding:0;
}
ul .dt {
height: 40px;
line-height: 20px;
background-color: #f6f6f6;
color: #999;
padding-left: 10px;
float: left;
width: 155px;
visibility: hidden;
}
ul .pic {
width: 165px;
float: left;
height: 120px;
text-align: center;
}
ul .pic img {
height: 120px;
width: 120px;
}
ul .name {
color: #333333;
line-height: 20px;
float: left;
height: 40px;
width: 155px;
padding-left: 10px;
}
ul .price {
float: left;
width: 155px;
padding-left: 10px;
height: 30px;
line-height: 30px;
font-family: Arial, "宋体";
}
ul .price .big {
color: #cc0000;
font-size: 16px;
font-weight: bold;
padding-right: 5px;
}
ul .price .small {
text-decoration: line-through;
color: #a599a6;
}
ul .tip {
float: left;
height: 23px;
width: 145px;
color: #cc0000;
padding-left: 10px;
line-height: 20px;
}
ul .sumbit {
float: left;
height: 40px;
width: 145px;
padding-left: 10px;
}
ul .sumbit .num {
line-height: 12px;
height: 12px;
width: 30px;
text-align: center;
color: #999;
border: 1px solid #cfcfcf;
margin-right: 3px;
margin-left: 3px;
}
ul .sumbit img {
cursor:pointer;
}
ul .sumbit .btn {
background-p_w_picpath: url(../img/confirm-button.gif);
background-repeat: no-repeat;
height: 24px;
width: 67px;
color: #fff;
font-weight: bold;
cursor:pointer;
border:none 0;
margin-left: 3px;
}
ul .sumbit .over-btn {
background-p_w_picpath: url(../img/Over-btn.gif);
background-repeat: no-repeat;
float: left;
height: 26px;
width: 57px;
cursor:pointer;
border:none 0;
}
</style>
转载于:https://blog.51cto.com/1120173856/1172217
1534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
