幻灯片，图片相册列表，淘宝商品放大镜 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);
                    }
                }
            })

转载于:https://www.cnblogs.com/RedRoshan/p/3663436.html