0

div1 つのコンテナーにいくつかの要素が含まれdivており、それらをスライドして一度に 1 つだけ表示し、特定のタイムアウトの後、アニメーションを使用して現在表示されている div を左にスライドさせ、次の div にスライドさせたい右から。

私のHTMLは次のようになります。

<div id="topMaps" style="height: 225px; overflow: hidden;">
  <div>First slide - some content here</div>
  <div>Second slide - some content here</div>
  <div>... slide - some content here</div>
  <div>n'th slide - some content here</div>
</div>

これには次のスクリプトを使用しています。

var currentSlide = 1;
var numSlides = -1;
var slideSpeed = 1000;
var timePerSlide = 3500;

function nextSlide() {
    $('#topMaps div:nth-child(' + currentSlide + ')').hide("slide", { direction: "left" }, slideSpeed);
    currentSlide += 1;
    if (currentSlide >= numSlides)
        currentSlide = 1;
    $('#topMaps div:nth-child(' + currentSlide + ')').show("slide", { direction: "left" }, slideSpeed);

    setTimeout(nextSlide, timePerSlide);
}

$(document).ready(function() {
    numSlides = $('#topMaps div').length;
    setTimeout(nextSlide, timePerSlide);
});

しかし、それは機能していません。nextSlide関数が初めて呼び出されると、Firefox は次のエラーを報告します。

o.easing[this.options.easing || (o.easing.swing ? "swing" : "linear")] is not a function
http://localhost/templates/front/default/js/jquery.js
Line 19

そして$('#topMaps div:nth-child(' + currentSlide + ')')、Firebug の Watch パネルに追加すると、10 個の要素のコレクションが返されるのですか? 何が起こっているのか本当にわかりません。

多分誰かが私を助けることができますか？

編集セレクタの問題を理解したので、使用する必要がありました$('#topMaps>div:nth-child(' + currentSlide + ')')（に注意して>ください）。それでもまだ機能していません。

4

2 に答える 2

1

あなたが望んでいた答えではありませんが、Cycle Pluginの使用を検討しましたか?

于 2009-09-10T09:02:41.210 に答える
0

各 div に ID を設定し、それを nextSlide() js 関数で呼び出し、currentSlide 変数をテストして、次の div を選択することをお勧めします。これは良いプログラミングではありませんが、何が問題なのかがわかるまで、少なくとも機能させることができます。 $('#topMaps div:nth-child(' + currentSlide + ')')

于 2009-09-10T09:06:57.490 に答える