javascript - 使用 JavaScript/Jquery 淡出背景图片

Question

我不太了解 Javascript。我想要大约 5 个背景图像以 5 秒的间隔连续旋转和淡入淡出。

网络上有很多图片幻灯片，但我需要它在我的网站上有背景图片。

非常感谢任何帮助!

Answer 1

使用 jQuery你可以这样做:

setInterval(function(){
    var source = $("#background-images img:first").attr("src");
    $('#background-images img:first').appendTo($('#background-images'));
    $('#fading-images-container').css('background', 'url('+ source +') no-repeat');
},5000);

html:

<div id="fading-images-container"> </div> <!-- this div will show the fading background images after picking them up from the background-images div -->
<div id="background-images"> <!-- hide this div in the CSS, it's only to hold the images--> 
 <img src="" alt="" />
 <img src="" alt="" />
 <img src="" alt="" />
 <img src="" alt="" />
 <img src="" alt="" />
</div>

要使用淡入淡出，我建议不要使用背景图像，而是使用 div 中的实际图像。

我以前是这样做过的:

setInterval(function(){
    $('#fading-images:first-child').fadeOut('slow')
     .next('img').fadeIn('slow')
     .end().appendTo('#slideshow');}, 
     4000);

html:

  <div id="fading-images"> 
    <img src="img/home-1.jpg"> 
    <img src="img/home-2.jpg"> 
    <img src="img/home-3.jpg"> 
  </div>