jquery图片分页

 

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>

转载请注明：前端录»jquery图片分页