Posted By

Jamie on 02/19/10


Tagged

jquery mouseover slide advance mouseenter Deck slidedeck autoplay


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

mordauk


SlideDeck autoplay on mouse enter


 / Published in: jQuery
 

This is assuming that you have SlideDeck loaded already. http://www.slidedeck.com/

  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  

You need to login to post a comment.