JQ UL-左右切換li
功能：Jquery實現ul中的li左右切換！！javascript
Jquery代碼：
java
<script type="text/javascript">ide
$(document).ready(function(){url
//顧客同時看了spa
var num = parseInt($("#goods ul").length / 4)-1;ip
var numde = num;input
var leftde = "";it
$(".L-arrows").click(function () {io
if (num < numde) {function
$("#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>
相關文章
- 1. css ul li 左對齊，換行
- 2. JQ 左右切換+索引點按鈕——切換 DIV
- 3. UL LI 佈局 TAB 切換條
- 4. 移動端h5商品橫向列表ul li 左右滑動
- 5. 前端ul li 小記
- 6. 爲View設置左右切換動畫
- 7. 輪播圖-無左右切換-prototype
- 8. Unity切換成左右屏效果
- 9. ubuntu命令切換鼠標左右鍵
- 10. 左右切換上一頁下一頁
- 更多相關文章...
- • ionic 切換開關操作 - ionic 教程
- • ionic Toggle(切換開關) - ionic 教程
- • Composer 安裝與使用
- • 算法總結-歸併排序
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安裝
- 2. Linux下Redis安裝及集羣搭建
- 3. shiny搭建網站填坑戰略
- 4. Mysql8.0.22安裝與配置詳細教程
- 5. Hadoop安裝及配置
- 6. Python爬蟲初學筆記
- 7. 部署LVS-Keepalived高可用集羣
- 8. keepalived+mysql高可用集羣
- 9. jenkins 公鑰配置
- 10. HA實用詳解
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. css ul li 左對齊，換行
- 2. JQ 左右切換+索引點按鈕——切換 DIV
- 3. UL LI 佈局 TAB 切換條
- 4. 移動端h5商品橫向列表ul li 左右滑動
- 5. 前端ul li 小記
- 6. 爲View設置左右切換動畫
- 7. 輪播圖-無左右切換-prototype
- 8. Unity切換成左右屏效果
- 9. ubuntu命令切換鼠標左右鍵
- 10. 左右切換上一頁下一頁