0

我正在使用以下脚本，但如果我在同一页面上出现超过 1 次，它就会中断。我正在尝试将它放到可以在同一页面上放置多个轮播的位置。

HTML：

<div class="carousel_outer">
    <div class="portfolio-carousel horizontal">
        <div class="carousel" id="carousel1">
            <div class="carousel_container carousel1">
                <ul class="portfolio-wrap carousel1">
                    <li><a class="gall_thumb" href="#" title="First Pic"><img src="#" alt="First Pic" /></a></li>
                    <li><a class="gall_thumb" href="#" title="Second Pic"><img src="#" alt="Second Pic" /></a></li>
                </ul>
            </div> 
            <a class="carousel_prev" href="#">Previous</a>
            <a class="carousel_next" href="#">Next</a>
        </div> 
    </div> 
</div>

页面上的Javascript：

$('.carousel').mycarousel({
    delay: 150,
    fade:300,
    slide: 700,
    effect:'slide',                   
    orientation:'horizontal',
    loop: false,
    autoplay: false
});

和实际的轮播javascript：

(function ($) {
$.fn.extend({
    mycarousel: function (options) {
        var defaults = {
            delay: 150,
            fade: 300,
            slide: 500,
            effect: "fade",
            orientation: "horizontal",
            captionFade: 150,
            loop: false,
            autoplay: true,
            time: 3000
        };
        var options = $.extend(defaults, options);
        return this.each(function () {
            var o = options;
            var carousel = this;
            $carousel_container = $(carousel).find(".carousel_container");
            $li = $(carousel).find(".carousel_container ul li");
            var visible_width = parseInt($carousel_container.css("width"), 10);
            var visible_height = parseInt($carousel_container.css("height"), 10);
            var number_items = $li.size();
            var item_width = parseInt($li.css("width"), 10);
            var item_height = parseInt($li.css("height"), 10);
            var item_marginRight = parseInt($li.css("marginRight"), 10);
            var item_marginLeft = parseInt($li.css("marginLeft"), 10);
            var item_marginTop = parseInt($li.css("marginTop"), 10);
            var item_marginBottom = parseInt($li.css("marginBottom"), 10);
            if (o.orientation == "horizontal") {
                var visible_items = Math.ceil(visible_width / (item_width + item_marginRight + item_marginLeft));
            } else {
                var visible_items = Math.ceil(visible_height / (item_height + item_marginTop + item_marginBottom));
            }
            var slides = Math.ceil(number_items / visible_items);
            $float_easing = "easeInOutQuart";

            function set_item_classes_visibility() {
                $li.each(function (index) {
                    var class_number = Math.floor((index + visible_items) / visible_items);
                    $(this).addClass("visible_" + class_number);
                    if (class_number == "1") {
                        $(this).css("display", "block");
                        $(this).find(".inner").css("display", "block");
                    } else {
                        $(this).css("display", "none");
                        $(this).find(".inner").css("display", "none");
                    }
                });
            }
            set_item_classes_visibility();

            function set_next_prev_classes() {
                var visible_item_class = $(carousel).find(".carousel_container ul li:visible").attr("class");
                var visible_id = visible_item_class.split("_");
                if (!o.loop) {
                    if (visible_id[1] == "1") {
                        $(".carousel_prev").addClass("disable");
                    } else {
                        $(".carousel_prev").removeClass("disable");
                    }
                    if (visible_id[1] == slides) {
                        $(".carousel_next").addClass("disable");
                    } else {
                        $(".carousel_next").removeClass("disable");
                    }
                }
            }
            set_next_prev_classes();

            function set_item_position() {
                $li.each(function () {
                    $(this).css("display", "none");
                    $(this).css("position", "absolute");
                    if (o.orientation == "horizontal") {
                        $(this).css("top", "0");
                        $(this).css("left", visible_width + parseInt($carousel_container.css("paddingLeft")) + parseInt($carousel_container.css("paddingRight")), 10);
                    } else {
                        if (o.orientation == "vertical") {
                            $(this).css("left", "0");
                            $(this).css("top", visible_height + parseInt($carousel_container.css("paddingTop")) + parseInt($carousel_container.css("paddingBottom")), 10);
                        }
                    }
                });
                $carousel_container.find("li.visible_1").each(function (index) {
                    $(this).css("display", "block");
                    if (o.orientation == "horizontal") {
                        var left_position = (index * (item_width + item_marginRight + item_marginLeft)) + parseInt($carousel_container.css("paddingLeft"), 10);
                        $(this).css("left", left_position);
                    } else {
                        if (o.orientation == "vertical") {
                            var top_position = (index * (item_height + item_marginTop + item_marginBottom)) + parseInt($carousel_container.css("paddingTop"), 10);
                            $(this).css("top", top_position);
                        }
                    }
                });
            }
            if (o.effect == "slide") {
                set_item_position();
            }
            function show_next_prev(method) {
                function show_items_fade(id) {
                    var next_class_name = "visible_" + id;
                    $carousel_container.find("li." + next_class_name).css("display", "block");
                    $carousel_container.find("li." + next_class_name).each(function (index) {
                        var delay = (index) * o.delay;
                        if (method == "prev") {
                            var delay = ((visible_items - 1) - index) * o.delay;
                        }
                        var index_item = (index + 1);
                        $(this).find(".inner").delay(delay).fadeIn(o.fade, function () {
                            if (index_item == visible_items || id == slides) {
                                set_next_prev_classes();
                            }
                        });
                    });
                }
                function show_items_slide(id) {
                    var next_class_name = "visible_" + id;
                    $carousel_container.find("li." + next_class_name + " .inner").css("display", "block");
                    $carousel_container.find("li." + next_class_name).each(function (index) {
                        $(this).css("display", "block");
                        var delay = (index) * o.delay;
                        if (method == "prev") {
                            var delay = ((visible_items - 1) - index) * o.delay;
                        }
                        var index_item = (index + 1);
                        if (o.orientation == "horizontal") {
                            var left_position = (index * (item_width + item_marginRight + item_marginLeft)) + parseInt($carousel_container.css("paddingLeft"), 10);
                            $(this).delay(delay).animate({
                                left: left_position
                            }, o.slide, $float_easing, function () {
                                if (index_item == visible_items || id == slides) {
                                    set_next_prev_classes();
                                }
                            });
                        } else {
                            if (o.orientation == "vertical") {
                                var top_position = (index * (item_height + item_marginTop + item_marginBottom)) + parseInt($carousel_container.css("paddingTop"), 10);
                                $(this).delay(delay).animate({
                                    top: top_position
                                }, o.slide, $float_easing, function () {
                                    if (index_item == visible_items || id == slides) {
                                        set_next_prev_classes();
                                    }
                                });
                            }
                        }
                    });
                }
                var visible_item_class = $carousel_container.find("li:visible").attr("class");
                visible_id = visible_item_class.split("_");
                var next_id = parseInt(visible_id[1], 10) + 1;
                var prev_id = parseInt(visible_id[1], 10) - 1;
                if (visible_id[1] == 1) {
                    prev_id = slides;
                }
                if (visible_id[1] == slides) {
                    next_id = 1;
                }
                switch (o.effect) {
                    case "fade":
                        $carousel_container.find("li:visible").each(function (index) {
                            var delay = (index) * o.delay;
                            var index_item = (index + 1);
                            var last_item = $carousel_container.find("li." + visible_item_class).size();
                            if (method == "prev") {
                                delay = ((visible_items - 1) - index) * o.delay;
                                last_item = 1;
                            }
                            $(this).find(".inner").delay(delay).fadeOut(o.fade, function () {
                                if (index_item == last_item) {
                                    $("li." + visible_item_class).css("display", "none");
                                    if (method == "next") {
                                        show_items_fade(next_id);
                                    } else {
                                        if (method == "prev") {
                                            show_items_fade(prev_id);
                                        }
                                    }
                                }
                            });
                        });
                        break;
                    case "slide":
                        $carousel_container.find("li.visible_" + prev_id).each(function (index) {
                            if (o.orientation == "horizontal") {
                                if (method == "next") {
                                    var left_position = visible_width + parseInt($carousel_container.css("paddingLeft"), 10) + parseInt($carousel_container.css("paddingRight"), 10);
                                } else {
                                    if (method == "prev") {
                                        var left_position = "-" + item_width + "px";
                                    }
                                }
                                $(this).css("left", left_position);
                            } else {
                                if (o.orientation == "vertical") {
                                    if (method == "next") {
                                        var top_position = visible_height + parseInt($carousel_container.css("paddingTop"), 10) + parseInt($carousel_container.css("paddingBottom"), 10);
                                    } else {
                                        if (method == "prev") {
                                            var top_position = "-" + item_height + "px";
                                        }
                                    }
                                    $(this).css("top", top_position);
                                }
                            }
                        });
                        $carousel_container.find("li." + visible_item_class).each(function (index) {
                            var delay = (index) * o.delay;
                            var zindex = index + 10;
                            var index_item = (index + 1);
                            var last_item = $carousel_container.find("li." + visible_item_class).size();
                            if (method == "prev") {
                                delay = ((visible_items - 1) - index) * o.delay;
                                zindex = ((visible_items - 1) - index) + 10;
                                last_item = 1;
                            }
                            $(this).css("z-index", zindex);
                            if (o.orientation == "horizontal") {
                                if (method == "next") {
                                    var left_position = "-" + item_width;
                                } else {
                                    if (method == "prev") {
                                        var left_position = visible_width + parseInt($carousel_container.css("paddingLeft"), 10) + parseInt($carousel_container.css("paddingRight"), 10);
                                    }
                                }
                                $(this).delay(delay).animate({
                                    left: left_position
                                }, o.slide, $float_easing, function () {
                                    if (index_item == last_item) {
                                        $("li." + visible_item_class).css("display", "none");
                                        if (method == "next") {
                                            show_items_slide(next_id);
                                        } else {
                                            if (method == "prev") {
                                                show_items_slide(prev_id);
                                            }
                                        }
                                    }
                                });
                            } else {
                                if (o.orientation == "vertical") {
                                    if (method == "next") {
                                        var top_position = "-" + item_height;
                                    } else {
                                        if (method == "prev") {
                                            var top_position = visible_height + parseInt($carousel_container.css("paddingTop"), 10) + parseInt($carousel_container.css("paddingBottom"), 10);
                                        }
                                    }
                                    $(this).delay(delay).animate({
                                        top: top_position
                                    }, o.slide, $float_easing, function () {
                                        if (index_item == last_item) {
                                            $("li." + visible_item_class).css("display", "none");
                                            if (method == "next") {
                                                show_items_slide(next_id);
                                            } else {
                                                if (method == "prev") {
                                                    show_items_slide(prev_id);
                                                }
                                            }
                                        }
                                    });
                                }
                            }
                        });
                        break;
                }
            }
            if (o.autoplay) {
                var interval = setInterval(function () {
                    var visible_item_class = $(carousel).find(".carousel_container ul li:visible").attr("class");
                    var visible_id = visible_item_class.split("_");
                    if (!o.loop) {
                        if (visible_id[1] == slides) {
                            clearInterval(interval);
                        } else {
                            show_next_prev("next");
                        }
                    } else {
                        show_next_prev("next");
                    }
                }, o.time);
            }
            $(carousel).find(".carousel_next").click(function () {
                clearInterval(interval);
                show_next_prev("next");
                return (false);
            });
            $(carousel).find(".carousel_prev").click(function () {
                clearInterval(interval);
                show_next_prev("prev");
                return (false);
            });
            $li.hover(function () {
                clearInterval(interval);
                $(this).find(".caption").fadeIn(o.captionFade);
            }, function () {
                $(this).find(".caption").fadeOut(o.captionFade);
            });
        });
    }
});
})(jQuery);

我在想是否有某种方法可以用 ID 识别每个轮播，并且脚本只在每个 ID 内执行它可以工作的东西，但我不知道如何完成它。

编辑：当我单击下一个/上一个按钮时，我收到以下 js 控制台错误：visible_item_class is undefined

4

3 回答 3

0

根据set_next_prev_classes插件中的功能，问题可能是您的“下一个”和“上一个”按钮共享一个公共类。（插件不应该以这种方式做事，但无论如何都是这样。）

解决方案应该简单到为每个轮播的“下一个”和“上一个”按钮提供 DISTINCT 类名称——这可以像在每个按钮上附加数字 1 和 2 一样简单。（然后告诉插件作者这种方法会导致问题。）

于 2012-12-08T01:54:45.197 回答
0

解决问题的两种方法。

  1. 更改轮播代码以获取用作轮播的 div 的 id 和轮播控件。

  2. 复制轮播代码两次。首先将“.carousel”替换为“#Id1”，第二个替换为“#Id2”。
    然后控件将是“#Id1_next”、“#Id1_prev”。这有点骇人听闻，但无能为力。

于 2012-12-08T02:00:46.593 回答
0

给他们每个人一个唯一的 ID，然后用那个 ID 给他们打电话。

$('#carousel1').mycarousel({
    theid: $(this).attr('id'),
    delay: 150,
    fade:300,
    slide: 700,
    effect:'slide',                   
    orientation:'horizontal',
    loop: false,
    autoplay: false
});

$('#carousel2').mycarousel({
    theid: $(this).attr('id'),
    delay: 150,
    fade:300,
    slide: 700,
    effect:'slide',                   
    orientation:'horizontal',
    loop: false,
    autoplay: false
});

附带说明一下，以下行是必要的： theid: $(this).attr('id')

我没有看到它在轮播代码中的任何地方使用。

于 2012-12-08T01:45:13.740 回答