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.
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>
Post a Comment for "How Do I Add A Cycle Style Repeating Image Phase Background To My Website?"