Advanced Search

Return to Snippet

Revision: 24045
at February 19, 2010 11:08 by Jamie
Initial Code 
<dl id="slidedeck" class="slidedeck">
	<dt>Slide 1</dt>
	<dd>Slide content</dd>
	<dt>Slide 2</dt>
	<dd>Slide content</dd>
	<dt>Slide 3</dt>
	<dd>Slide content</dd>
	<dt>Slide 4</dt>
	<dd>Slide content</dd>
	<dt>Slide 5</dt>
	<dd>Slide content</dd>
</dl>
<script type="text/javascript">
	var MySlideDeck = $('#slidedeck').css({
		width: '900px',
		height: '300px'
	}).slidedeck();
	
	// initialize an autoplay switch
	var autoPlay = false;			
	
	function myLoop(){
		// only advance slides when the mouse is over.
		if(autoPlay){
			// Check to see if the current slide is the last slide
			if(MySlideDeck.current == MySlideDeck.slides.length){
				// This is the last slide, go to the first slide
				MySlideDeck.goTo(1);
			} else {
				// This is not the last slide, go to the next slide
				MySlideDeck.next();
			}
		}
	}

	setInterval(myLoop,2000);	// Run the myLoop() function every 2 seconds (2000 miliseconds)
	
	// set autoplay to on when the mouse enters
	$('.slidedeck').mouseenter(function(){
		autoPlay = true;
	});
	// set autoplay to off when the mouse leaves
	$('.slidedeck').mouseleave(function(){
		autoPlay = false;
	});
	// set autoplay to off when the mouse clicks
	$('.slidedeck').click(function(){
		autoPlay = false;
	});

</script>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

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

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
SlideDeck autoplay on mouse enter

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
jquery

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
jQuery