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之间存在空白。
您可以看到实时示例here

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

Answer 1

试试这个

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

希望它可以帮到你

幻灯片显示改变img src属性

1 个答案: