Question

我在使用jQuery图像旋转器时遇到了一些麻烦。当快速单击下一个/上一个按钮两次时，图像会闪烁，最终会看到两个图像。关于如何解决它的任何想法？

这是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>

任何想法如何在图像切换时停止闪烁？

Answer 1

您目前在{c}中有float:left;。当fadeIn和fadeOut同时运行时，两个元素都可见并且在空间中且没有足够的空间，因此其他图像会下降到第一张图像下方。您应该对它们使用position: absolute;，以便它们可以存在于同一空间中。然后我只是将z-index更改为图像淡入的图像，因此它位于顶部，并且不用担心将旧图像淡出，只需在另一个图像完成淡入后再hide()。

Answer 2

如上所述，由于溢出没有以任何方式隐藏，因此图像同时显示。可以使用

查看将here堆叠在一起的示例

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

on

#fader

和

position:absolute;

on

.usedListingImage

Answer 3

您目前正在同时发起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();
    });

}

如何在切换时让这些图像停止“闪烁”？

3 个答案: