问题描述
我的Javascript幻灯片有效，除了前两个图像很笨拙。
图像“跳入”，然后在应该褪色时似乎被捕获。
幻灯片也从最后一张图像开始，而不是第一张图像，这就是为什么我将HTML中的图像无序移动的原因。
是什么在代码中引起这种情况？
Javascript：
<script>
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(10000)
.next()
.fadeIn(10000)
.end()
.appendTo('#slideshow');
}, 10000);
</script>
HTML：
<div id="slideshow">
<div>
<img src="img/2.jpg">
</div>
<div>
<img src="img/3.jpg">
</div>
<div>
<img src="img/1.jpg">
</div>
</div>
CSS：
#slideshow {
position: relative;
width: 100%;
height: 350px;
}
#slideshow > div {
position: absolute;
}
1楼
Hanzallah Afgan
3
2015-07-26 06:50:43
您只需要使用CSS将图像的位置设为绝对位置，即可使图像彼此重叠。
$("#slideshow > div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut(5000) .next() .fadeIn(5000) .end() .appendTo('#slideshow'); }, 5000);
#slideshow > div > img{ Width: 100px; height: 100px; position: absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="slideshow"> <div> <img src="http://avatarmaker.net/free-avatars/avatars/nature_217/plants_276/pinapple_fruit_avatar_100x100_70415.jpg" alt="Img 1"> </div> <div> <img src="http://avatarmaker.net/free-avatars/avatars/nature_217/plants_276/big_fruit_avatar_100x100_94646.jpg" alt="Img 2"> </div> <div> <img src="http://www.dhresource.com/albu_590477479_00/1.thumb.jpg" alt="Img 3"> </div> </div>
2楼
Joansy
1
已采纳
2015-07-31 01:23:56
我发现，如果我添加与照片相同数量的下一个/淡入/结束序列，我的代码将按照需要的方式工作。 因此，在这种情况下，它是三个，因此我在appendTo之前应该有三个next / fadein / ends。
这使过渡到下一个图像变淡，而不是跳跃。
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(5000)
.next()
.fadeIn(5000)
.end()
.next()
.fadeIn(5000)
.end()
.next()
.fadeIn(5000)
.end()
.appendTo('#slideshow');
}, 5000);