0

ユーザーがスライダーの対応するボタンをクリックするたびに、スライダー内の画像のコレクションの位置を左右に「シャント」しようとしています。私はこれを機能させていますが、コードは少し大きくて反復的であるため、少しクリアしようとしています。これが現在の状態です。

$('#btnRight').click(function (e) {
    e.preventDefault();
    if (parseInt(6 + indexx) != 10) {
        indexx++;
        $('#first').attr('src', $('#second').attr('src'));
        $('#second').attr('src', $('#third').attr('src'));
        $('#third').attr('src', $('#fourth').attr('src'));
        $('#fourth').attr('src', $('#fifth').attr('src'));
        $('#fifth').attr('src', $('#sixth').attr('src'));
        $('#sixth').attr('src', '/Content/Images/Gallery/Thumbs/' + parseInt(6 + indexx) + '.png');
    }
});

各要素を手動で選択し、ソース属性を交換して画像を右に移動していることがわかります。

これが私が改善に取り組んできたコードですが、完全には機能しません：

$('#btnLeft').click(function (e) {
    e.preventDefault();
    $("#gallerySlider img").each(function (index) {
        $(this).attr("src", $(this).prev().attr("src"));
    });
});

これにより、現在のコレクションの最初の画像が取得され、#gallerySlider間違っているすべての画像のソースが設定されます。しかし、アラート内に同じコードを入れると、画像が正しく表示され、前のコードが表示されます。たとえば、出力は次のようになります。

/Content/Images/Design/Thumbs/10.png Previous Image: /Content/Images/Design/Thumbs/9.png

それで、それは画像を正しく選択し、私に正しいものを返しますsrcが、なぜそれはスライダー内のすべての画像のソースを同じものに設定するのですか？確かにそれはそれらすべてを通過するはずですそして：

$(this).prev().attr("src")

それぞれ違うのでしょうか？

誰かが私がここで間違っているところを見ることができますか？

ありがとうございました

4

2 に答える 2

1

イメージ 1 が「img1.jpg」、イメージ 2 が「img2.jpg」などと想像すると、

あなたが入れたコードは画像2を「img1.jpg」に設定し、次に画像3を画像2のsrcに設定し、これは現在「img1.jpg」になり、この画像は最終的にそれらすべてのsrcになります. それは理にかなっていますか？

あなたのために仕事をする負荷がそこにあるので、jQuery タイプ ギャラリー プラグインをオンラインで探しましたか?

于 2012-08-10T08:58:38.820 に答える
1

user1166905 の回答は、まったく問題ないように聞こえます。解決策は、左に移動したい場合は、最初の要素を div から取り出し、最後の div に戻すことです。右を押しても同様です。リストから最後の要素を取得し、それを div から削除して、ギャラリー div の先頭に再度配置します。

$('#btnLeft').click(function (e) {
     e.preventDefault();
     $('#gallerySlider').append($("#gallerySlider img").first());
}); 

$('#btnRight').click(function (e) {
     e.preventDefault();
     $('#gallerySlider').prepend($("#gallerySlider img").last());
});

私はそれがトリックを行うべきだと思います

于 2012-08-10T09:07:50.680 に答える