jquery圖片分頁
阿新 • • 發佈：2019-09-18
js:
<script type="text/javascript">
$(document).ready(function() {
//圖片分頁
var page=1;//初始為第一版
var J_pro=$(".J_pro_view");//圖片列表區域
var view_wrap=$(".view-wrap").width();//圖片顯示固定範圍
var total=$(".J_pro_view li").length;//圖片總數
var num=4;//每頁顯示的條數
var total_page=Math.ceil(total/num);//總頁數
//下一頁
$(".next").click(function(){
if (!J_pro.is(":animated")) { // 如果正處於動畫中的則不進行動畫
if (page == total_page) {
// 最後一版，動畫跳回第一版
$(this).addClass("disabled-btn");
return false;
//J_pro.animate({"margin-left": "0px" }, 300);//如果是是最後一屏就回到第一屏
//page = 1;
}
else {
// 跳到下一版
$(".prev").removeClass("disabled-btn");
$(this).removeClass("disabled-btn");
J_pro.animate({ "margin-left": "-=" + view_wrap }, 300);
page++;
}
}
});
//上一頁
$(".prev").click(function(){
if (!J_pro.is(":animated")) { // 如果正處於動畫中的則不進行動畫
if (page == 1) {
// 第一個版面，動畫跳到最後一版
$(this).addClass("disabled-btn");
return false;
//J_pro.animate({"margin-left": "-=" + view_wrap * (total_page - 1) }, 300);//如果是
//page = total_page;
}
else {
// 跳到下一版
$(".next").removeClass("disabled-btn");
$(this).removeClass("disabled-btn");
J_pro.animate({ "margin-left": "+=" + view_wrap }, 300);
page--;
}
}
});
});
</script>
html:
<div class="views-list">
<a href="javascript：void(0);" class="prev disabled-btn" rel="nofollow">Prev</a>
<div class="view-wrap">
<div class="items" style="width:296px;overflow:hidden;">
<ul class="J_pro_view" style="width:2000em;">
<li>
<a class="zoomThumbActive" href='javascript：void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}">
<img src='imgProd/thumbs/triumph_thumb1.jpg'></a>
</li>
<li>
<a href='javascript：void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}">
<img src='imgProd/thumbs/triumph_thumb2.jpg'></a>
</li>
<li>
<a href='javascript：void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}">
<img src='imgProd/thumbs/triumph_thumb3.jpg'></a>
</li>
<li>
<a href='javascript：void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small4.jpg',largeimage: './imgProd/triumph_big4.jpg'}">
<img src='imgProd/thumbs/triumph_thumb4.jpg'></a>
</li>
<li>
<a href='javascript：void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small5.jpg',largeimage: './imgProd/triumph_big5.jpg'}">
<img src='imgProd/thumbs/triumph_thumb5.jpg'></a>
</li>
<li>
<a href='javascript：void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small6.jpg',largeimage: './imgProd/triumph_big6.jpg'}">
<img src='imgProd/thumbs/triumph_thumb6.jpg'></a>
</li>
<li>
<a href='javascript：void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small7.jpg',largeimage: './imgProd/triumph_big7.jpg'}">
<img src='imgProd/thumbs/triumph_thumb7.jpg'></a>
</li>
<li>
<a href='javascript：void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small8.jpg',largeimage: './imgProd/triumph_big8.jpg'}">
<img src='imgProd/thumbs/triumph_thumb8.jpg'></a>
</li>
<li>
<a href='javascript：void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small9.jpg',largeimage: './imgProd/triumph_big9.jpg'}">
<img src='imgProd/thumbs/triumph_thumb9.jpg'></a>
</li>
<li>
<a href='javascript：void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small10.jpg',largeimage: './imgProd/triumph_big10.jpg'}">
<img src='imgProd/thumbs/triumph_thumb10.jpg'></a>
</li>
<li>
<a href='javascript：void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small11.jpg',largeimage: './imgProd/triumph_big11.jpg'}">
<img src='imgProd/thumbs/triumph_thumb11.jpg'></a>
</li>
<li>
<a href='javascript：void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small12.jpg',largeimage: './imgProd/triumph_big12.jpg'}">
<img src='imgProd/thumbs/triumph_thumb12.jpg'></a>
</li>
<li>
<a href='javascript：void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small13.jpg',largeimage: './imgProd/triumph_big13.jpg'}">
<img src='imgProd/thumbs/triumph_thumb13.jpg'></a>
</li>
<li>
<a href='javascript：void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small14.jpg',largeimage: './imgProd/triumph_big14.jpg'}">
<img src='imgProd/thumbs/triumph_thumb14.jpg'></a>
</li>
<li>
<a href='javascript：void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small15.jpg',largeimage: './imgProd/triumph_big15.jpg'}">
<img src='imgProd/thumbs/triumph_thumb15.jpg'></a>
</li>
</ul>
</div>
</div>
<a href="javascript：void(0);" class="next" rel="nofollow">Next</a>
</div>轉載請註明：前端錄