Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Poor Mans Image Rotator (multiple slides, minimal jquery)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
var rollem = function() {
var si = $('#slide ul.current');
si.removeClass('current').fadeOut(
{
duration: 800,
always: function(){
if( si.next().length )
si.next('ul').addClass('current').fadeToggle(1500);
else
$('#slide ul:first').addClass('current').fadeToggle(1500);
window.setTimeout(rollem,10000);
}
}
);
};
$('#slide ul').hide();
$('#slide ul:first').addClass('current').show();
rollem();
</script>
</head>
<body>
<div id="slide">
<ul>
<li><img src="http://placehold.it/200x200" /></li>
<li><img src="http://placehold.it/200x200" /></li>
<li><img src="http://placehold.it/200x200" /></li>
</ul>
<ul>
<li><img src="http://placehold.it/200x200" /></li>
<li><img src="http://placehold.it/200x200" /></li>
<li><img src="http://placehold.it/200x200" /></li>
</ul>
<ul>
<li><img src="http://placehold.it/200x200" /></li>
<li><img src="http://placehold.it/200x200" /></li>
<li><img src="http://placehold.it/200x200" /></li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.