1

jQuery 画像回転子に問題があります。次/前のボタンをすばやく 2 回クリックすると、画像がちらつき、両方の画像が表示されます。それを修正する方法についてのアイデアはありますか？

ここにHTMLがあります

<div id="prev">
<img id="prevListing" class="prevListing" src="..." onmouseover="this.src='...'" onmouseout="this.src='...'">
</div>

<div class="faded">
<div id="fader">
<img src="...">
<img src="...">
</div>
</div>

<div id="next">
<img id="nextListing" class="nextListing" src="..." onmouseover="this.src='...'" onmouseout="this.src='...'">
</div>

CSS

.used {float:left; width:50%;}

.usedListingImage {width:65%;float:left; display:block; margin:-1% auto 0 auto; max-width:400px;}

#fader{display:block;  width:95%;}

.nextListing {width:5%;float:right; margin:6% 5% 5% 5%;padding-right:5%;}

.prevListing  {width:5%;float:left; margin:7% 5% 5% 5%; }

そしてjQuery

<script type="text/javascript">
jQuery (function() {
    $('#fader img:not(:first)').hide();

    $('#fader img').each(function() {
        var img = $(this);
        $('<img>').attr('src', $(this).attr('src')).load(function() {
            img.css('margin-left', -'0');
        });
    });

    var pause = false;

    function fadeNext() {
        $('#fader img').first().fadeOut().appendTo($('#fader'));
        $('#fader img').first().fadeIn();
    }

    function fadePrev() {
        $('#fader img').first().fadeOut();
        $('#fader img').last().prependTo($('#fader')).fadeIn();
    }

    $('#fader, #next').click(function() {
        fadeNext();
    });

    $('#prev').click(function() {
        fadePrev();
    });

    $('#fader, .button').hover(function() {
        pause = true;
    },function() {
        pause = false;
    });

    function doRotate() {
        if(!pause) {
            fadeNext();
        }    
    }

    var rotate = setInterval(doRotate, 5000);

});

</script>

画像が切り替わったときにちらつきを止める方法はありますか?

4

3 に答える 3

2

前述のように、オーバーフローが隠されているわけではないため、画像は同時に表示されます。それらを互いの上に積み重ねる例は、ここで使用して見ることができます

width:85%; position: relative; float: left;

の上

#fader

と

position:absolute;

の上

.usedListingImage
于 2012-12-06T21:57:03.970 に答える
2

あなたは現在float:left;CSSを持っています。同時に実行すると、両方の要素が表示され、スペース内にあり、十分なスペースがないため、他の画像が最初の画像の下に落ちますfadeIn。それらが同じ空間に存在できるように、それらにfadeOut使用する必要があります。position: absolute;次に、z-indexを画像フェードインの画像に変更するだけなので、それが一番上にあり、古い画像がフェードアウトすることを心配する必要はありませんhide()。他の画像がフェードインし終わった後です。

于 2012-12-06T21:48:51.667 に答える
1

fadeIn現在、とfadeOutを同時に開始しているため、短いオーバーラップが発生しています。fadeIn代わりにコールバックに変更することもできます:

function fadeNext() {
    $('#fader img').first().fadeOut(400, function(){
            $('#fader img').first().fadeIn();
    }).appendTo($('#fader'));

}

function fadePrev() {
    $('#fader img').first().fadeOut(400, function(){
        $('#fader img').last().prependTo($('#fader')).fadeIn();
    });

}
于 2012-12-06T21:42:58.110 に答える