[jQuery] HELP: Pause & Play

Mon, 26 Nov 2007 08:54:32 -0800

I put together the following script, inspired by Innerfade (http://medienfreunde.com/lab/innerfade/), 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(http://localhost/images/imageAjpg);
   width: 500px;
   height: 200px;
}
</style>

<script type="text/javascript">
   var Selector    =    "#Image";
   var Path            =    "http://localhost/images/";;
   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>

Reply via email to