0

この関数にバインドされたクリック イベントがあります。

animateItem: function (container, distance, speed) {
    var double = "-" + distance;
    var currentMargin = parseInt($(container).css("margin-left"));

    if (double >= currentMargin) {               
        $(".carousel-item").first().hide(speed, function () {
            $(this).appendTo(container).show();
        });
    } else {
        $(container).animate({ "margin-left": "-=" + distance + "px" }, speed);
    }
}

これは完全に機能します。コンテナのアニメーション化を停止し、代わりにアニメーションを模倣するコンテナの最後に最初の要素を移動します。

今、連続ループを作成したいので、これを試しました：

$(self.settings.itemContainerClass).animate({ "margin-left": "-=" + width * 50 + "px" }, {
    duration: 500 * 50,
    step: function (now, fx) {
        if (width >= now) {
            $(self.settings.itemClass).first().appendTo(self.settings.itemContainerClass);
        }
    }
});

しかし、これはうまくいきません。私が何を試すことができるかについて、誰かが私に洞察を与えることができますか?

乾杯、/r3plica

4

1 に答える 1

0

私は子供たちをアニメーション化していましたが、連続ループでそれがぎくしゃくしていることがわかりました。マージンの使用を試みた後、jquery サイトと animate の定義を再確認したところ、animate のデフォルトの効果が「swing」であることに気付きました。したがって、コードを次のように修正しました。

animateItem: function (self, speed) {
    var $item = $(self.settings.itemClass).first();
    var width = $item.outerWidth(true);
    var left = parseInt($item.css("left"));

    if (left < 0) {
        self.moveItem(self, speed, 1);
    } else {
        $item.animate({ "left": "-" + width + "px" }, {
            duration: speed,
            easing: "linear",
            step: function (now, fx) {
                $(self.settings.itemClass + ":gt(0)").css("left", now);
            }
        });
    }
},
moveItem: function (self, speed, count) {
    if (count > 0) {
        var $item = $(self.settings.itemClass).first();
        $item.hide(speed, "linear", function () {
            $(this).appendTo(self.settings.itemContainerClass).show(speed, "linear");
            self.moveItem(self, speed, count - 1); // Repeat
        });
    }
},

これは、オブジェクトがどのように見えるかを理解するために、単一のオブジェクトをアニメーション化するだけです.htmlは次のとおりです:)

<div id="carousel" class="carousel">
    <div class="carousel-container">
        <div class="carousel-item yellow">
            <div class="carousel-photo">
                <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
            </div>
            <p>Hicks, Bill</p>
        </div>
        <div class="carousel-item green">
            <div class="carousel-photo">
                <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
            </div>
            <p>Jeremy, Ron</p>
        </div>
        <div class="carousel-item blue">
            <div class="carousel-photo">
                <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
            </div>
            <p>Little, John</p>
        </div>
        <div class="carousel-item violet">
            <div class="carousel-photo">
                <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
            </div>
            <p>Smith, Will</p>
        </div>
        <div class="carousel-item purple">
            <div class="carousel-photo">
                <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
            </div>
            <p>Shakespear, William</p>
        </div>
        <div class="carousel-item pink">
            <div class="carousel-photo">
                <img src="http://www.csupomona.edu/~ieee/profile/2012/uman.png" />
            </div>
            <p>Jameson, Jenny</p>
        </div>
    </div>
</div>

常にアニメーション化するために、次の関数を作成しました。

animateWheel: function (self, speed, count) {
    var $item = $(self.settings.itemClass).first();
    var width = $item.outerWidth(true);

    $item.animate({ "left": "-" + width + "px" }, {
        duration: speed,
        easing: "linear",
        step: function (now, fx) {
            $(self.settings.itemClass + ":gt(0)").css("left", now);
        },
        complete: function () {
            self.moveItem(self, speed, count);
        }
    });
},

そして、私のオプションは次のようになります。

defaults = {
    itemsPerPage: 4.5,
    itemContainerClass: '.carousel-container',
    itemClass: '.carousel-item',
    startButton: '#start',
    carouselPage: '#carouselPage',
    contentElement: '.ui-content'
};

うまくいけば、それが同じ問題を抱えている他の誰かに何をすべきかについてのアイデアを与えるでしょう:)私の次の段階は、アニメーションが止まる前に（連続ループのために）アニメーションを遅くすることです

于 2013-09-20T08:36:34.020 に答える