如何使用Jquery淡入淡出不同的图像？

我有五个图像。这就像标题标志。我想显示那些图像像第一个图像应该淡出，然后第二个图像应该显示在同一个地方，然后第三个图像，然后再显示第一个图像。它应该继续淡入淡出。如何使用Jquery淡入淡出不同的图像？

的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，感谢

来源

2016-10-24 Faisal

请出示一些相关的CSS。 – Dario

@Dario这张图片的css中没有代码 – Faisal

尝试使用css'img {transistion：所有0.8s缓动转发;}' – prasanth

只要改变你的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/，看看它是如何工作

来源

2016-10-24 11:08:06 ScottyDoesKnow

$(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);  
});

来源

2016-10-24 10:52:53

它并不像您想象的那样工作。我设置了id =“photo1”，photo2和photo3。 – Faisal

如何使用Jquery淡入淡出不同的图像？

回答

相关问题