Hi here's my jquery function for slideshow with other inbuilt function. I have been trying to make it pause when i hover over the overall div. Help me out!
$(function() {
var timer = setInterval( showDiv, 5000);
var counter = 2;
function showDiv() {
if (counter ==0) { counter++; return; }
$('div','#slide-show-overall')
.stop()
.fadeOut('slow')
.filter( function() { return this.id.match('picture-set-' + counter); })
.fadeIn('slow');
if (counter ==2) { slideWings();} //extra functions
if (counter ==1) { resetWings();} //extra functions
counter == 3? counter = 1 : counter++;
}
});
});
<div style="position:absolute;width:1000px;height:600;top:0px;z-index:0;overflow:hidden;" id="slide-show-overall" >
<div id="picture-set-1" style="">
<img src="images/3.jpg" align=left width=1000>
</div>
<div id="picture-set-2" style="display:none;">
<img src="images/1.jpg" align=left width=1000>
<img src="images/wing_left.png" align=left height=200 width=200 style="margin-top:-900px;margin-left:230px;" id="wing-left-1">
<img src="images/wing_right.png" align=left height=200 width=200 style="margin- top:-900px;margin-left:830px;" id="wing-right-1">
</div>
<div id="picture-set-3" style="display:none;">
<img src="images/5.jpg" align=left width=1000>
</div>
</div>
Why don't you put your entire 'setInterval' process into a function? That way you can stop it by name and start it by just calling the function.
You want to use
clearInterval
to remove the interval on hover and then replace it in the off hover function: