CODEWITHSUNDEEP
jquerysliderslideshowslide
kold-kreator
kold-kreator

Reputation: 199

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!

Upvotes: 3

Views: 15785

Answers (2)

SarathSprakash
SarathSprakash

Reputation: 4624

DEMO

TRY this, on hover it will pause and ,on mouse leave it will begin from the time paused, not from the begining

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()
{  var a;
    var  timer =  setInterval( "slideSwitch()",5000);
 $("#slideshow a img").hover(function(ev){
     a= 5000-timer;                      // finding the time lapsed
    clearInterval(timer);
}, function(ev){
    timer =  setInterval( "slideSwitch()",a);   // resume from the time paused
});

Hope this helps,Thank you

Upvotes: 1

colestrode
colestrode

Reputation: 10668

You'll want to clear the interval on mouseenter, then start the slider again on mouseleave. You can use jQuery's hover() function as a shortcut:

Working Demo

$(function() {
    var interval = setInterval( slideSwitch, 10000 );

    $('#slideshow').hover(function() {
        clearInterval(interval);
    }, function() {
        interval = setInterval( slideSwitch, 10000 );
    });
});

Upvotes: 5

Related Questions