一个简单的幻灯片可以是什么样子

Question

我有一个简单幻灯片的例子。不幸的是，转换到最后一张图片的效果不如其他两张。

$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);

#slideshow {
margin: 80px auto;
position: relative;
width: 1229px;
height: 858px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow>div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
img {
width: 100%;
height: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
<div>
<img src="https://as2.ftcdn.net/jpg/02/68/04/19/500_F_268041942_RPytRGKfSKx4Yk4NV0RZ0sqcpx8ZSEak.jpg">
</div>
<div>
<img src="https://as2.ftcdn.net/jpg/02/68/04/19/500_F_268041959_VCKjqtEbr2te6x1P7z6g5xHYCFAnua6G.jpg">
</div>
<img src="https://as2.ftcdn.net/jpg/02/68/04/19/500_F_268041948_wv0NLtMeGfunrFb00kLYSokk1eYM2ygo.jpg">
</div>
</div>

我找不到错误：(。你有什么主意，甚至更好的主意吗？谢谢

Answer 1

$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);

#slideshow {
margin: 80px auto;
position: relative;
width: 1229px;
height: 858px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow>div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
img {
width: 100%;
height: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
<div>
<img src="https://as2.ftcdn.net/jpg/02/68/04/19/500_F_268041942_RPytRGKfSKx4Yk4NV0RZ0sqcpx8ZSEak.jpg">
</div>
<div>
<img src="https://as2.ftcdn.net/jpg/02/68/04/19/500_F_268041959_VCKjqtEbr2te6x1P7z6g5xHYCFAnua6G.jpg">
</div>
<div>
<img src="https://as2.ftcdn.net/jpg/02/68/04/19/500_F_268041948_wv0NLtMeGfunrFb00kLYSokk1eYM2ygo.jpg">
</div>
</div>

Answer 2

如果它很简单。我想你可以试试这个

https://codepen.io/SitePoint/pen/qiAyo

只有css和HTML。。这么简单的想法

解释：

<Container>
<Element 1 />
<Element 2 />
<Element 3 />
</Container>