[jQuery] HELP: Pause & Play
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body bgcolor="#ffffff" text="#000000">
<font face="Arial">I put together the following script, inspired by
Innerfade (<a class="moz-txt-link-freetext" href="http://medienfreunde.com/lab/innerfade/">http://medienfreunde.com/lab/innerfade/</a>), which sequentially
rotates the background image of a specified div.
Does anyone know how create a button that pause/play it?
Thanks
<style>
#Image
{
background-image: url(<a class="moz-txt-link-freetext" href="http://localhost/images/imageAjpg">http://localhost/images/imageAjpg</a>);
width: 500px;
height: 200px;
}
</style>
<script type="text/javascript">
var Selector = "#Image";
var Path = <a class="moz-txt-link-rfc2396E" href="http://localhost/images/">"http://localhost/images/"</a>;
var Images = new Array();
Images[0] = "imageA";
Images[1] = "imageB";
Images[2] = "imageC";
var next = 0;
var delay = 1500;
function NextImage()
{
next++;
if(next==Images.length) next = 0;
$(Selector).fadeOut(delay);
setTimeout("LoadImage('"+next+"')", delay);
}
function LoadImage(i)
{
$(Selector).css("background-image",
"url("+PathToImage+Images[i]+".jpg)");
$(Selector).fadeIn(delay);
setTimeout("NextImage('"+next+"')", delay);
}
jQuery().ready(function()
{
NextImage(next);
});
</script>
</head>
<body>
<div id="Image"></div>
</body>
</html>
</font>
</body>
</html>