How do I add a cycle style repeating image phase b

问题:

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">

回答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>