Stop on mouse over on a simple jquery slider -
i have real simple jquery slider, fits use. linked images, no controls, thumbs, nothing, simple!
i'm trying make stoo while mouse cursor on it, wasn't able to. can me here?
slider.js
function slideswitch() { var $active = $('#slideshow a.active'); if ( $active.length == 0 ) $active = $('#slideshow a:last'); var $next = $active.next().length ? $active.next() : $('#slideshow a:first'); $active.addclass('last-active'); $next.css({opacity: 0.0}) .addclass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeclass('active last-active'); }); } $(function() { setinterval( "slideswitch()", 10000 ); });
slider.css
#slideshow { height: 300px; position: relative; width: 960px; } #slideshow { left: 0; opacity: 0.0; position: absolute; top: 0; z-index: 8; } #slideshow a.active { opacity: 1.0; z-index:10; } #slideshow a.last-active { z-index: 9; }
html
<div id="slideshow"> <a href="#" class="active"><img src="img/slideshow/slide1.png" alt="engine - development solutions" /></a> <a href="#"><img src="img/slideshow/slide2.png" alt="engine - development solutions" /></a> <a href="#"><img src="img/slideshow/slide3.png" alt="engine - development solutions" /></a> </div>
thanks!
you'll want clear interval on mouseenter, start slider again on mouseleave. can use jquery's hover() function shortcut:
$(function() { var interval = setinterval( slideswitch, 10000 ); $('#slideshow').hover(function() { clearinterval(interval); }, function() { interval = setinterval( slideswitch, 10000 ); }); });
Comments
Post a Comment