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

Question

The question title says it all, I am not sure how to organize it in to my websites HTML due to the fixed menu bar, and its over all build. So to say, I want my website to have multiple backgrounds that fade in and out. I intend on adding more backgrounds over time. What I listed below is what I've been attempting to work with.

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 below.

 $(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")));
});    

The division script, which I'm not sure I have a use for unless I make my whole website one large div which seems pointless.

 <div class="slideshow">

Answer 1

Here is a quick hack. I would probably do something more elegant with management of the images in an array, but this should get you going.

 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>