Question

我想用JavaScript更改背景图片。

JS：

<head>
<script type="text/javascript">
    // Ta funkcja odpowiedzialna jest odpowiedzialna za zmiane obrazow w tle
  $(window).load(function(){
     var i = 0;
     var images = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];
     var image = $('#slideit');
     image.css('background-image', 'url(images/1.jpg)');
     image.css('background-size', 'cover');
     setInterval(function(){
          image.css('background-image', 'url(' + images [i++] +')');
          // image.fadeOut(1500, function (){
          //     image.fadeIn(1000);
          // })
          if(i == images.length) i = 0;
     }, 6000);
 });
</script>
</head>

HTML：

<body id="slideit" style="width:100%;height:100%;">

问题在于使图像平滑变化。注释掉的代码使网站中的所有内容都淡入淡出，除了背景外淡出。为什么会这样？此代码有效，但不能平滑地更改图像。如何淡入淡出图像？

Answer 1

不幸的是，CSS不支持背景图像的动画（通过转换）。为什么？实际上，我不确定为什么。但它足以让他们知道他们不会。 Javascript通过扩展CSS功能直接工作。简而言之，您可以通过Javascript完成您想要做的事情，而无需编写设计用于破解其功能的非常复杂的代码。

使用jQuery有一个简单的方法，但这实际上会使你的源代码变得不那么复杂。创建正文relative，将每个单独的背景图像添加到源的底部（以便在其他所有内容之后加载它们）在命名包装器中。我们选择#backgrounds。

<style>
body{
    height:100%;
    position:relative
}
#backgrounds img{
    position:absolute;
    z-index:1; // this is important
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    display:none;
}
#wrapper{
    position:relative;
    z-index:3; // again, this is important
}

</style>

我们将包装器的z-index设置为高于图像的z-index，以便我们的内容位于它们的前面，从而给出了图像是背景图像的错觉。如果您想要position:absolute效果，请将position:fixed更改为background-attachment:fixed。我假设你想要它们的宽度和高度是视口的宽度和高度;如果不是，就把它们改成什么。我们将图片设置为display:none，以便在页面加载时停止所有加载。呸！

<div id="wrapper">

    all of your page are belong to us...

</div>
<div id="backgrounds">
    <img src="background/one.jpg" alt="">
    <img src="background/two.jpg" alt="">
    <img src="background/three.jpg" alt="">
</div>

然后使用基于图像数量的计数器简单地遍历每个图像（这样您可以轻松地在以后轻松剪切和粘贴更多图像）：

$(function(){
    var total = $('#backgrounds img').length;
    var counter = 1;


        function cycle(){
            // Makes old backgrounds appear beneath new ones
            $('#backgrounds img').css('z-index','1')
            // Set it to display and opacity 0 so we get the effect
            $('#backgrounds img:nth-child('+counter+')').css({'opacity':'0','display':'block','z-index':'2'})

            // Fade the background in
            $('#backgrounds img:nth-child('+counter+')').animate({'opacity':'1'},1500)

            // increase the counter
            counter++

            // make sure we're working within the quantity of images we have
            if( counter > total ){ counter = 1 }
        }
        cycle();
        setInterval(function(){cycle()},6000);

})

Answer 2

尝试

$(function() {
  $.fx.interval = 3000;
  (function cycleBgImage(elem, bgimg) {
    elem.css("backgroundImage", bgimg).delay(3000, "fx")
      .fadeTo(3000, 1, "linear", function() {
        $(this).fadeTo(3000, 0, "linear", function() {
          var img = $(this).css("backgroundImage").split(",")
          , bgimg = img.concat(img[0]).splice(1).join(",");
          cycleBgImage(elem, bgimg);
        });
      });
  }($("#slideit")));
});

#slideit {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.0;
  background-color: #000;
  background-image: url("http://lorempixel.com/400/400/cats/?1")
    , url("http://lorempixel.com/400/400/animals/?2")
    , url("http://lorempixel.com/400/400/nature/?3")
    , url("http://lorempixel.com/400/400/technics/?4")
    , url("http://lorempixel.com/400/400/city/?5");
  background-size: cover, 0px, 0px, 0px;
  -webkit-transition: background-image 3000ms linear;
  -moz-transition: background-image 3000ms linear;
  -ms-transition: background-image 3000ms linear;
  -o-transition: background-image 3000ms linear;
  transition: background-image 3000ms linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<body id="slideit"></body>

改变背景图像 - JavaScript

2 个答案: