Monday, 19 August 2013

Stop on mouse over on a simple jquery slider

Stop on mouse over on a simple jquery slider

I have a real simple jquery slider, it fits well for my use. Just linked
images, no controls, thumbs, nothing, really simple!
I'm trying to make it stoo while the mouse cursor is over it, but i wasn't
able to. Can anyone help 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 a { 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!

No comments:

Post a Comment