Skip to content

Instantly share code, notes, and snippets.

@tiagodll

tiagodll/simpleSlide.html

Created November 28, 2013 15:45
Show Gist options
  • Save tiagodll/7693926 to your computer and use it in GitHub Desktop.
Save tiagodll/7693926 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
simpleSlide.html
<html>
<head>
<title>Slideshow</title>
</head>
<body>
<div id="bgcontainer">
<div style="background: #0000aa">1</div>
<div style="background: #00aa00">2</div>
<div style="background: #aa0000">3</div>
<div style="background: #aa00aa">4</div>
<div style="background: #00aaaa">5</div>
<div style="background: #aaaa00">6</div>
</div>
</body>
</html>
<style type="text/css">
#bgcontainer {
position:relative;
height:200px;
width: 500px;
border: solid black 1px;
}
#bgcontainer > * {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
opacity:0;
filter:alpha(opacity=0);
z-index: 0;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
var $simpleSlide = {
init: function (element) {
var firstItem = $(element).children().first();
firstItem.fadeTo(1000, 1);
setTimeout(function() { $simpleSlide.fadeSlide(firstItem)}, 5000);
},
fadeSlide: function (item) {
var nextItem = $(item).next();
if(nextItem.length == 0){
$(item).parent().children().css('z-index', 0);
nextItem = $(item).parent().children().first();
}
nextItem.css('z-index', item.css('z-index') + 1);
nextItem.fadeTo(1000, 1, function(){ $(item).fadeTo(100,0) });
setTimeout(function() { $simpleSlide.fadeSlide(nextItem)}, 5000);
}
}
$(function () {
slide.init($("#bgcontainer"));
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment