用js改变背景图片

Question

我正在尝试使用fadeIn、fadeOut、addClass 和 removeClass 编写每 3 秒更改一次背景图像的脚本。 有没有更好的方法来使用setInterval？

$("document").ready(function () {

 $("#bg").delay(3000);
 $("#bg").fadeOut(300);
 $("#bg").removeClass('bg1');
 $("#bg").addClass('bg2');
 $("#bg").fadeIn(300);

 $("#bg").delay(3000);
 $("#bg").fadeOut(300);
 $("#bg").removeClass('bg2');
 $("#bg").addClass('bg1');
 $("#bg").fadeIn(300);


});

顺便说一句。它不能正常工作。

HTML：

<div id="bg" class="ShowBG bg1"></div>

CSS：

#bg{
position:absolute;
width:100%;
height:70%;
background-size:cover;
background-position:center;
display:none;
}
.bg1{background-image:url("/img/index/bg1.png");}
.bg2{background-image:url("/img/index/bg2.png");}

Answer 1

编辑

刚刚注意到 OP 想要褪色，所以我向两个类和 #bg 添加了一个简单的 CSS transition and opacity 属性。

使用toggleClass()。 不知道你为什么用display:none 所以我把它删了。我还向html 和body 添加了尺寸，因此您的div 与它的百分比长度相关。

演示

setInterval(function() {
  $('#bg').toggleClass('bg1 bg2');
}, 3000);

html,
body {
  height: 100%;
  width: 100%
}

#bg {
  position: absolute;
  width: 100%;
  height: 70%;
  background-size: cover;
  background-position: center;
  opacity:1;
  transition:all 1s;
}

.bg1 {
  background-image: url("http://placehold.it/500x250/00f/eee?text=BG1");
  opacity:1;
  transition:all 1s;
}

.bg2 {
  background-image: url("http://placehold.it/500x250/f00/fff?text=BG2");
  opacity:1;
  transition:all 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg" class="ShowBG bg1"></div>

Answer 2

您的方法应该可以正常工作，但它不是最好的编写方法：如果您的平面设计师突然决定在循环中添加另一个背景图像怎么办？您的代码可能会很快变得很长。以下是我的做法：

var backgroundClasses = ['bg1', 'bg2']; // Store all the background classes defined in your css in an array
var $element = $('.container'); // cache the element we're going to work with
var counter = 0; // this variable will keep increasing to alter classes

setInterval(function() { // an interval
	counter++; // increase the counter
	$element.fadeOut(500, function() { // fade out the element
  	$element.removeClass(backgroundClasses.join(' ')). // remove all the classes defined in the array
    addClass(backgroundClasses[counter % backgroundClasses.length]). // add a class from the classes array
    fadeIn(500); // show the element
  });
}, 3000)

.container {
  width: 100vw;
  height: 100vh;
}

.bg1 {
  background-color: red;
}

.bg2 {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container bg1"></div>

代码中最难的部分是：

$element.addClass(backgroundClasses[counter % backgroundClasses.length])

它基本上添加了存储在backgroundClasses 数组中的类之一。在计数器上使用modulo 运算符（%）基本上会在每次到达数组末尾时重新开始，如果数组只有 2 个元素，则计数 0、1、0、1、0、1长。如果它的长度为 3 个元素，则它计数为 0、1、2、0、1、2、... 等等。希望这是有道理的。

Answer 3

使用fadeOut() 方法的回调（参见complete parameter here）在动画完成时执行类更改。否则，动画仍在播放时，该类将交换。

如果您想自动且连续地进行操作，没有比使用 setInterval() 更好的方法了。

这是工作示例：

$("document").ready(function () {
 var bg = $("#bg");
 setInterval(function() {
    // We fadeOut() the image, and when animation completes we change the class and fadeIn() right after that.
    bg.fadeOut(300, function() {
     bg.toggleClass('bg1 bg2');
     bg.fadeIn(300);
    });
 }, 1500);

});

#bg {
  position:absolute;
  width:100%;
  height:70%;
  background-size:cover;
  background-position:center;
}
.bg1 {
  background-image: url("https://www.w3schools.com/css/img_fjords.jpg");
}
.bg2 {
  background-image: url("https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg" class="ShowBG bg1"></div>