Question

我创建了一个4幅图像淡入淡出幻灯片。页面加载时，最后一张图像会在第一张图像出现之前快速闪烁。我尝试在本网站的帖子中建议使用最后一张空白图片，但这没有任何效果。我也尝试将第一张幻灯片放在最后一个位置，这会在开始时删除闪烁的图像，但最后一张图像显示的时间是原来的两倍。有没有办法防止这种情况发生而不必复制第一张幻灯片？

$(document).ready(function() {
    $("#photos img:gt(0)").hide();
    setInterval(function() {
        var current = $('#photos img:visible');
        var next = current.next().length ? current.next() : $('#photos img:eq(0)');  
        //hide the current image  
        current.fadeOut(2000);  
        //show the next one  
        next.fadeIn(2000);  
    }, 5000);  
});

Answer 1

你需要用css隐藏图像，这样它在js加载之前隐藏了，如下所示：

//css
#photos img:last-child {
     display: none;
}

只是一个想法......

您的评论

修改。

#photos img {
     display: none;
}
#photos img:first-child {
     display: block;
}

Answer 2

我明白了。我需要隐藏除第一个以外的所有图像。当我只隐藏一个时，会出现另一个，但它很快我认为它是同一个。现在它工作正常。

Javascript幻灯片最后一张图片快速出现在Show of Show

2 个答案: