Advanced Search

SlideDeck autoplay on mouse enter

/ Published in: jQuery
Save to your folder(s)
This is assuming that you have SlideDeck loaded already.
http://www.slidedeck.com/

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <dl id="slidedeck" class="slidedeck">
  2. 	<dt>Slide 1</dt>
  3. 	<dd>Slide content</dd>
  4. 	<dt>Slide 2</dt>
  5. 	<dd>Slide content</dd>
  6. 	<dt>Slide 3</dt>
  7. 	<dd>Slide content</dd>
  8. 	<dt>Slide 4</dt>
  9. 	<dd>Slide content</dd>
  10. 	<dt>Slide 5</dt>
  11. 	<dd>Slide content</dd>
  12. </dl>
  13. <script type="text/javascript">
  14. 	var MySlideDeck = $('#slidedeck').css({
  15. 		width: '900px',
  16. 		height: '300px'
  17. 	}).slidedeck();
  18.  
  19. 	// initialize an autoplay switch
  20. 	var autoPlay = false;			
  21.  
  22. 	function myLoop(){
  23. 		// only advance slides when the mouse is over.
  24. 		if(autoPlay){
  25. 			// Check to see if the current slide is the last slide
  26. 			if(MySlideDeck.current == MySlideDeck.slides.length){
  27. 				// This is the last slide, go to the first slide
  28. 				MySlideDeck.goTo(1);
  29. 			} else {
  30. 				// This is not the last slide, go to the next slide
  31. 				MySlideDeck.next();
  32. 			}
  33. 		}
  34. 	}
  35.  
  36. 	setInterval(myLoop,2000);	// Run the myLoop() function every 2 seconds (2000 miliseconds)
  37.  
  38. 	// set autoplay to on when the mouse enters
  39. 	$('.slidedeck').mouseenter(function(){
  40. 		autoPlay = true;
  41. 	});
  42. 	// set autoplay to off when the mouse leaves
  43. 	$('.slidedeck').mouseleave(function(){
  44. 		autoPlay = false;
  45. 	});
  46. 	// set autoplay to off when the mouse clicks
  47. 	$('.slidedeck').click(function(){
  48. 		autoPlay = false;
  49. 	});
  50.  
  51. </script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.