javascript - 如何使用 Jquery 在同一个地方为不同的图像制作淡入和淡出？

Question

我有五张图片。这就像标题 Logo 。我想显示那些图像，比如第一张图像应该淡出，然后第二张图像应该显示在同一个地方，然后是第三张图像，然后是第一张图像。它应该保持淡入淡出。

html代码:

<div id="slideshow">
    <div>
      <img id="img1" src="images/heading%20bar%201.png" style="height: 150px; width: 100%; padding-bottom: 10px;"/>
    </div>
    <div>
      <img id="img2" src="images/heading%20bar%201.png" style="height: 150px; width: 100%; padding-bottom: 10px;"/> 
    </div>
    <div>
      <img id="img3" src="images/heading%20bar%201.png" style="height: 150px; width: 100%; padding-bottom: 10px;"/> 
    </div>
</div>

jquery代码

$(document).ready(function () {
        $("#slideshow > div:gt(0)").hide();

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

当我第一次尝试此代码时，它显示所有图像在三行中，然后一个接一个地淡出，当它第二次执行时，第一张图像进入第二行，然后在第一行中淡入第二张图像，就像它正在工作一样。

我希望第一张图片淡出，然后第二张图片淡入，然后是第三张图片。

我是 Jquery 新手，谢谢

Answer 1

只需将您的 HTML 更改为具有以下内联 CSS。

<div id="slideshow" style="margin:50px auto;position:relative; width:400px; height:250px; padding:10px;">
    <div>
      <img id="img1" src="http://lorempixel.com/400/250/" style="position:absolute;top:10px;bottom:10px;left:10px;right:10px;"/>
    </div>
    <div>
      <img id="img2" src="http://lorempixel.com/400/250/sports" style="position:absolute;top:10px;bottom:10px;left:10px;right:10px;"/> 
    </div>
    <div>
      <img id="img3" src="http://lorempixel.com/400/250/animals" style="position:absolute;top:10px;bottom:10px;left:10px;right:10px;"/> 
    </div>
</div>

查看 https://jsfiddle.net/u15qvgdd/看看这是如何工作的