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%;
}

并使用一种简单的方法更改图像更改src JavaScript的：

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（）{ $（＆＃34; #bg img.shown＆＃34;）。fadeOut（＆＃34; slow＆＃34;，function（）{$（this）.removeClass（＆＃34;显示＆＃34;）;}） ;

    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);

编辑：

做了一些小修补。这是一个工作小提琴

http://jsfiddle.net/k40rcpbf/

您有一些CSS规则来管理#bg中的div，但您的HTML没有

Answer 2

setInterval

之后

$( "#bgChange" ).fadeOut( "slow", function() {
  // ...
});

编辑：我解释一下。

你应该有2个或更多的images.Code没有经过测试。源代码只是为了给你提供想法。

<div id='phototab'>
<img class=active_img src="picture1.png">
<img src="picture2.png">
</div>
<script>
function changePhoto(){
 var current_img=$("#phototab .active_img");
 var next_img=curent_img.next();
    curent_img.fadeOut( "slow", function() {
      current_img.removeClass('active_img');
      next_img.addClass('active_img');
    });
}
setInterval('changePhoto()', 1000);

</script>

淡出背景图像变化？

2 个答案: