画像スライダーを作成したばかりで、無限ループで左右にアニメーション化することができました。私が今問題を抱えているのは、スライドで画像を選択することです.jsFiddleの例では、色付きの小さなボックスのセットであり、上部のスライドを選択するとスライドの色に関連しますが、選択した画像にスライドする必要がありますが、この時点ではそうではありません。誰かがこれを達成するのを手伝ってくれるでしょうか(上部のスライドを選択し、それを左にスライドさせて関連するカラー画像にします) jsFiddle here
色を選択した後、インデックスに問題があります。スライドが右側の最後に移動するため、インデックスには新しい開始インデックスが必要ですが、誰かがそれを修正する方法を知っていれば変更されないようです。どこか。
jQuery:
$('.stages li a').on('click', function(e) {
var slide = $('#' + $(this).data('slide'));
$('.stages li').removeClass('selected');
$(this).parent().addClass('selected');
goto_slide(slide);
});
function goto_slide(slide) {
var index = $(slide).index();
var count = index;
$('.slides ul').animate({'margin-left': '-=' + (item_width * (count - 1))}, 500, function() {
$('.slides ul li').slice(0, count - 1).each(function() {
$('.slides ul li:first').after($('.slides ul li:last'));
})
});
$('#index').text(index);
}
バージョンを更新しましたが、 jsFiddleのように動作するようになりました。私は最終的にそれを機能させることができました.それは今かなりうまく機能しています. 私がしたい改善点の1つは、上部の画像スライドを選択したときに次のスライドのみを表示し、選択したスライドの間にインデックスがある他のスライドを非表示にすることです。できれば前にあげてください。