Posted By

erickaweb on 04/28/10

Tagged

jquery

Versions (?)

Last Edited at 04/28/10 04:36pm

Statistics

Viewed 558 times

Favorited by 0 user(s)

Related snippets

jQuery Fade Slideshow

/ Published in: jQuery

From a blog...

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
  // Every 5 seconds execute the switchSlide() function
  var playSlideshow = setInterval( "switchSlide()", 5000);
  $('.slideshow').hover(function(){
  	clearInterval(playSlideshow);
	},
	function(){
		playSlideshow = setInterval("switchSlide()",5000);
		});
});
// This function takes the first .slide element and put at the end
function switchSlide() {
  var slide = $('.slideshow li:first');
  slide.hide();
  $('.slideshow').append(slide);
  slide.fadeIn('slow');
}
</script>
<style type="text/css">
.slideshow {height: 269px;width: 140px;margin: 0;position: relative;list-style:none;}
.slideshow li {position: absolute;}
</style>
***
<ul class="slideshow">
<li><img src="images/1.gif"></li>
<li><img src="images/2.gif"></li>
<li><img src="images/3.gif"></li>
<li><img src="images/4.gif"></li>
<li><img src="images/5.gif"></li>
<li><img src="images/6.gif"></li>
</ul>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.