幻灯片,图片相册列表,淘宝商品放大镜 jquery实现

 

 

1.图片相册切换 主要3个按钮功能

    点击小图列表切换大图

            $(document).on("click", ".photo_a", function () {
                $(".photo_a").removeClass("cur").removeAttr("dota_mark");
                $(this).addClass("cur").attr("dota_mark", "dota_cur");
                $(".photo_block").children("img").hide().attr("src", $(this).children("img").attr("src")).fadeIn("slow");
            })

 

    点击下一页时,触发选择的小图的下一张小图的点击事件。默认显示7张,当是7的倍数也就是下一个隐藏列表就切换小图列表。
            $(document).on("click", ".photo_next", function () {
                var c = parseInt($(".photo_a[dota_mark=‘dota_cur‘]").index(‘.photo_list a‘)) + 1;
                if ($(".photo_a:eq(" + c + ")").length) {
                    $(".photo_a:eq(" + c + ")").click();
                    if (c % 7 == 0) {
                        var number = c / 7 * 707;
                        $(".photo_ul").animate({ left: -number }, 500);
                    }
                }
            })

    同上
            $(document).on("click", ".photo_prev", function () {
                var c = parseInt($(".photo_a[dota_mark=‘dota_cur‘]").index(‘.photo_list a‘)) - 1;
                if (c >= 0) {
                    $(".photo_a:eq(" + c + ")").click();
                    if ((c - 6) % 7 == 0) {
                        var number = (c + 1) / 7 * 707 - 707;
                        $(".photo_ul").animate({ left: -number }, 500);
                    }
                }
            })

幻灯片,图片相册列表,淘宝商品放大镜 jquery实现,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。