2

3 秒間隔でいくつかのリンク画像を表示しようとしていますが、最初の画像がフェードアウトした後は何も表示されません。

<div class="fadein">
  <a href=""><img src="/media/home-content.jpg" alt="" /></a>
  <a href=""><img src="/media/Banners/images/denim.jpg" alt="" /></a>
</div>

jquery

jQuery.noConflict();

jQuery(document).ready(function(){

jQuery(function(){
    jQuery('.fadein a img:gt(0)').hide();
        setInterval(function(){
          jQuery('.fadein a:first-child img').fadeOut(3000)
             .parent().next('a img').fadeIn()
             .end().appendTo('.fadein');}, 
          3000);
    });

});

アップデート

コードを次のように変更するだけです

jQuery(function(){
    jQuery('.fadein a:gt(0) img').hide();
        setInterval(function(){
          jQuery('.fadein a:first-child img').fadeOut(3000)
             .parent().next('a').children('img').fadeIn()
             .end().appendTo('.fadein');}, 
          10000);
    });
4

4 に答える 4

1

ちょっと男これを試してみてください：http://jsfiddle.net/gRHPA/2/

お役に立てれば！

コード

jQuery.noConflict();
jQuery('.fadein a:gt(0)').hide();

setInterval(function(){
    jQuery('.fadein a:first-child')
        .fadeOut()
        .next('a')
        .fadeIn()
        .end()
        .appendTo('.fadein');
}, 3000);
​
于 2012-07-05T12:15:26.943 に答える
1 
jQuery(function() {
    var intervalId;
    var $previousAnchor;
    var $anchor;
    var $firstAnchor = $(".fadein a").first();

    $anchor = $firstAnchor;
    intervalId = setInterval(function() {
        $anchor.fadeIn();

        if (typeof($previousAnchor) != "undefined") {
            $previousAnchor.hide();
        }

        $previousAnchor = $anchor;

        if (typeof($anchor) == "undefined" || $anchor.next()[0] == undefined) {
            $anchor = $firstAnchor;
        }
        else {
            $anchor = $anchor.next();
        };
    }, 1000);
});

キャッシュを使用してパフォーマンスを向上させることに注意してください。また、提供されたソリューションを比較するためのパフォーマンス テストも追加しました。

デモを見るパフォーマンステスト
を見る

于 2012-07-05T12:40:09.023 に答える
0

おそらく、これにはJQuery カルーセル プラグインを使用できます。

于 2012-07-05T12:10:05.157 に答える
0

これでより簡単に、より速く

CSS:

.fadein a{
    display:none;
}​

js:

var current = null;
$(function(){
    $('.fadein').each(function(){
        var context = this;
        current = $('a',this).first().show();
        setInterval(function(){
            $(current).hide();
            var next = $(current).next('a');
            if(next.length == 0)
                next = $('a',context).first();
            current = $(next).show();          
        }, 1000);
    });
});​

作業フィドル: http://jsfiddle.net/techunter/C4uER/

于 2012-07-05T12:33:30.700 に答える