Skip to content

Instantly share code, notes, and snippets.

@dalethedeveloper

dalethedeveloper/gist:0ce24d86cf4c4a12e277

Created October 1, 2014 15:17
Show Gist options
  • Save dalethedeveloper/0ce24d86cf4c4a12e277 to your computer and use it in GitHub Desktop.
Save dalethedeveloper/0ce24d86cf4c4a12e277 to your computer and use it in GitHub Desktop.
Download ZIP
Poor Mans Image Rotator (multiple slides, minimal jquery)
Raw
gistfile1.html
<!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