javascript - How to pause slideshow when hovering -
how add pause effect when hover on image in jquery slideshow?
$(document).ready(function () { slideshow(); }); function slideshow() { var showing = $('#slideshow .show'); var next = showing.next().length ? showing.next() : showing.parent().children(':first'); var timer; showing.fadeout(500, function () { next.fadein(200).addclass('show'); }).removeclass('show'); settimeout(slideshow, 3000); }
var hovering = false; //default not hovering $("#slideshow").hover(function () { //*replace body element hovering = true; //when hovered, hovering true }, function () { hovering = false; //when un-hovered, hovering false slideshow(); //start process again }); function slideshow() { if(!hovering) { //if not hovering, proceed /* code here*/ nextslide(); settimeout(slideshow, 1000); } } function nextslide(){ var showing = $('#slideshow .show'); var next = showing.next().length ? showing.next() : showing.parent().children(':first'); var timer; showing.fadeout(500, function () { next.fadein(200).addclass('show'); }).removeclass('show'); }
Comments
Post a Comment