jquery - 更改 img src 属性的幻灯片

Question

我想通过更改src图像的属性（id= imgT）来创建一个简单的幻灯片放映。
ultop不可见 ( display:none)

<img id='imgT' src="top/00.jpg">
<ul id="ultop">
   <li><img src="top/00.jpg"></li>
     <li><img src="top/01.jpg"></li>
     <li><img src="top/02.jpg"></li>
     <li><img src="top/03.jpg"></li>
</ul>

<script>
n=0;
x=$('#ultop li').length;

setInterval(function() { 
    if ( n < (x - 1)){n+=1;}
    else {n=0};
    var goimg = $('#ultop li img' + ':eq(' + n +')').attr('src');
    $('#imgT').fadeOut(1000, function() {
    $('#imgT').attr('src', goimg).fadeIn();
});
},  7000)
</script>

但是，fadeOut 和fadeIn 之间有一个空白。您可以在此处
查看实时示例

有没有办法让这个过程顺利进行而没有空白。

Answer 1

像这样试试

$('#imgT').fadeOut(1000, function() {
    $('#imgT').attr('src', goimg).fadeIn();
});

希望对你有帮助