0

こんにちは、JQueryスライドショーを使用しています。HTML内のすべての画像が互いに重なり合っており、コードを最後の画像から開始しようとしました。しかし、それは機能しません、何かアイデアはありますか？

元のコードは次のようになります。

$(document).ready(function() {
    var current = $('#gallery img:first');
    //Set the fade in effect for the next image, show class has higher z-index
    current.addClass('show').css({
        opacity: 0.0
    }).animate({
        opacity: 1.0
    }, 1000);

    setInterval('gallery()', 3000);
});

function gallery() {
    //if no IMGs have the show class, grab the first image
    var current = ($('#gallery img.show') ? $('#gallery img.show') : $('#gallery img:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? current.next() : $('#gallery img:first'));

    //Set the fade in effect for the next image, show class has higher z-index
    next.css({
        opacity: 0.0
    }).addClass('show').animate({
        opacity: 1.0
    }, 1000);

    //Hide the current image
    current.animate({
        opacity: 0.0
    }, 1000).removeClass('show');
}​

私のリバースコードは次のようになります。 

$(document).ready(function() {
    var current = $('#gallery img:last');
    //Set the fade in effect for the next image, show class has higher z-index
    current.addClass('show').css({
        opacity: 0.0
    }).animate({
        opacity: 1.0
    }, 1000);

    setInterval('gallery()', 3000);
});

function gallery() {
    //if no IMGs have the show class, grab the first image
    var current = ($('#gallery img.show') ? $('#gallery img.show') : $('#gallery img:last'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var before = ((current.before().length) ? current.before() : $('#gallery img:last'));

    //Set the fade in effect for the next image, show class has higher z-index
    before.css({
        opacity: 0.0
    }).addClass('show').animate({
        opacity: 1.0
    }, 1000);

    //Hide the current image
    current.animate({
        opacity: 0.0
    }, 1000).removeClass('show');
}​
4

1 に答える 1

1

テストページがない場合、ulに画像を追加してこれを行いました：

var before = ((current.prev().length) ? current.prev() : $('#gallery img:last'));

これにより、表示する前の画像が選択されます。何もない場合は、最後の画像を再度選択します。

これがうまくいくか試してみませんか？

于 2012-04-18T18:04:04.810 に答える