Question

问题标题说明了一切，我不知道如何将其组织到我的网站HTML中，因为固定的菜单栏以及它的所有版本。所以说，我希望我的网站有多个淡入淡出的背景。随着时间的推移，我打算增加更多背景。我在下面列出的是我一直在尝试使用的内容。

body {
      width: 400px;
      height: 400px;
     }
    /* set `#slideshow` parent background color */
    .slideshow {
      background: #000;
      display:block;
      width:inherit;
      height:inherit;
    }
    #slideshow {
      width: 100%;
      height: 100%;
      display: block;
      opacity: 0.0;
      background-color: #000;
      /* 
         set background images as `url(/path/to/image)` here, 
         separated by commas 
      */
      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;
    /* set transtitions at 3000ms 
      -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;
        */
    }

以下Javascript。

 $(function() {
  $.fx.interval = 0;
  (function cycleBgImage(elem, bgimg) {
    // `elem`:`#slideshow`
    // set, reset, delay to `1000` after background image reset
    elem.css("backgroundImage", bgimg)
      // fade in background image
      .fadeTo(3000, 1, "linear", function() {
        // fade in background image
        $(this).delay(3000, "fx").fadeTo(3000, 0, "linear", function() {
          // split background image string at comma , creating array
          var img = $(this).css("backgroundImage").split(","),
            // concat first background image to `img` array,
            // remove first background image from `img` array
            bgimg = img.concat(img[0]).splice(1).join(",");
          // recursively call `cycleBgImage`
          cycleBgImage(elem, bgimg);
        });
      });
  }($("#slideshow")));
});

除非我让整个网站成为一个看似毫无意义的大型div，否则我不确定我会使用除法脚本。

 <div class="slideshow">

Answer 1

这是一个快速的黑客攻击。我可能会在管理阵列中的图像时做一些更优雅的事情，但这应该让你顺利。

function swap(){
  var $targets = $("#slideshow img");
  var className = "active";

  var $next = $targets.filter(".active").next();
  if ($next.length === 0) { $next = $targets.first(); }
  
  $targets.removeClass(className);
  $next.addClass(className)
}

swap();
window.setInterval(swap, 5 * 1000);

#slideshow {
  background-color: #000;
  width: 400px;
  height: 400px;
  border: solid 1px;
  overflow: hidden;
  position: relative;
}

#slideshow img {
  position:absolute;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

#slideshow img.active {
  opacity: 1;
}

<div id="slideshow">
  <img src="http://lorempixel.com/400/400/cats/?1" />
  <img src="http://lorempixel.com/400/400/animals/?2" />
  <img src="http://lorempixel.com/400/400/nature/?3" />
  <img src="http://lorempixel.com/400/400/technics/?4" />
  <img src="http://lorempixel.com/400/400/city/?5" />
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如何在我的网站上添加循环样式重复图像阶段背景？

1 个答案: