3

画像スライダーを作成したばかりで、無限ループで左右にアニメーション化することができました。私が今問題を抱えているのは、スライドで画像を選択することです.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つは、上部の画像スライドを選択したときに次のスライドのみを表示し、選択したスライドの間にインデックスがある他のスライドを非表示にすることです。できれば前にあげてください。

4

1 に答える 1

1

わかりました、これがあなたのやり方です。

ステップ 1: コンテナー div を作成し、特定の高さと幅を設定します。以下のように

<style>

.container{
    height:400px;
    width:500px;
    overflow:none;
    position : relative;
}

.container img{
    width : 400px;
    height : 500px;
    display:none;
    position : absolute;
    top : 0px;
}

.container img.selected{
    display : inline-block;
}

.container .nextslide{
    top : 0px;
    left : 500px;
}

</style>

<div class="container">
    <img ... class="selected"/>
    <img ... class=""/>
    <img ... class=""/>
    <img ... class=""/>
    ...
</div>

<script>
$(function(){
    var x=0;
    $(".container img").each(function(){
        $(this).css("left", x + "px"); x+=$(this).width();
    });

    window.setInterval(function(){
        var current = $("container img.selected");
        var next = current.next();
        next.addClass("nextslide);
        $(next).animate({ "left" : "0px"}, 500, function(){
            next.addClass("selected");
        });

        $(current).animate({ "left" : "-" + current.width() + "px"}, 500, function(){
            current.removeClass("selected");
        });
    }, 1000);
});
</script>

これにより、スライド画像を作成するためのかなり良いアイデアが得られるはずです。

于 2013-03-11T06:51:30.307 に答える