首页 > Web开发 > 详细

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

时间:2014-04-15 14:07:24      阅读:544      评论:0      收藏:0      [点我收藏+]

 

 

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实现,布布扣,bubuko.com

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

原文:http://www.cnblogs.com/RedRoshan/p/3663436.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!