Question

我有五张照片。这就像标题标志。我想显示像第一张图像应该淡出的那些图像，然后第二张图像应该显示在同一个地方，然后是第三张图像，然后再显示第一张图像。它应该继续淡入淡出。

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/以查看其工作原理

Answer 2

$(function() {
    // match all divs with ID starting with 'photo'
    $("div[id^=photo] > img").hide();
    setTimeout(function(){
       $("div[id^=photo]").each(function() {
           var rand = Math.floor(Math.random() * $(this).children().length);
           $(this).find('img:eq(' + rand + ')').fadeIn();
       });
    }, 500);       
});

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

2 个答案: