0

次のスクリプトを使用していますが、同じページに複数のオカレンスを配置すると、壊れます。同じページに複数のカルーセルを配置できる場所に移動しようとしています。

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

問題を解決する 2 つの方法。

  1. カルーセル コードを変更して、 carousel および carousel コントロールとして使用される div の ID を取得します。

  2. カルーセル コードを 2 回コピーします。最初の「.carousel」を「#Id1」に、2 番目の「#Id2」に置き換えます。
    次に、コントロールは「#Id1_next」、「#Id1_prev」になります。これは一種のハッキーですが、仕方がありません。

于 2012-12-08T02:00:46.593 に答える
0

それぞれに一意の 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 に答える