How Do I Add A Cycle Style Repeating Image Phase Background To My Website?

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 mult

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

functionswap(){
  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;
}

#slideshowimg {
  position:absolute;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

#slideshowimg.active {
  opacity: 1;
}

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