javascript - 淡出背景图像改变？

Question

不使用像其他背景图片那样的background我正在使用这种风格HTML:

<div id="bg">
    <img id="bgChange" src="image/image.jpg" />
</div>

CSS:

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg > div {
  position: absolute ; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

并使用一种简单的方法来更改图像更改 srcJavaScript:

var imageRotating = document.getElementById("bgChange");
var i = 0;
setInterval(function imageRotator() {
    imageRotating.setAttribute("src", "image/image" + ++i + ".jpg");
    if (i == 3) { i = -1; }
}, 5000);

我想问的是:使用 JQuery 如何在脚本中添加 .fadeOut()？我是 JQuery 的初学者，所以我希望我能得到一些详细的答案。

Answer 1

这是我的做法

HTML

<div id="bg">
    <img src="image/image1.jpg" class="shown" />
    <img src="image/image2.jpg" />
    <img src="image/image3.jpg" />
</div>

CSS:

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 200%; 
  height: 200%;
}
#bg img{
  position: fixed; 
  top: 0; 
  left: 0; 
    display: none;
    width: 300px;
    height: 300px;
}
#bg img.shown{
    display: block;
}

JavaScript:

setInterval(function imageRotator() { $("#bg img.shown").fadeOut("slow", function(){ $(this).removeClass("shown"); });

    if ($("#bg img.shown").next("img").length > 0) // if there is an image after this one
    { 
        $("#bg img.shown").next("img").fadeIn("slow", function(){ $(this).addClass("shown"); });
    }
    else
    {
        $("#bg img:first-child").fadeIn("slow", function(){ $(this).addClass("shown"); });
    }
}, 2000);

编辑:

做了一些小的修复。这是一个工作 fiddle

http://jsfiddle.net/k40rcpbf/

你有一些 CSS 规则来管理 #bg 中的 div 但你的 HTML 没有任何