Automated Rotating Divs - each at different speeds

Automated Rotating Divs - each at different speeds

Hi,

I'd appreciate some assistance on some JQuery code (I'm a newbie with JQuery).

What I'm trying to do is have divs with the same class name rotate. The divs overlap each other, with only one displaying at a time. Basically, I'm building an ad rotator.

Here's my working code.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Working Test</title>
  6. <script type="text/javascript" src="jquery.js"></script>         
  7. <style type="text/css">
  8. <!--
  9. .offer-holder {
  10.     border: 1px solid red;
  11.     width: 200px;
  12.     height: 200px;
  13.     background: #999;
  14.     position: absolute;
  15.     top: 100px;
  16.     left: 100px;
  17. }
  18.    
  19. .SecondsPerRotation" {
  20.     display: none;   
  21. }
  22. -->
  23. </style>
  24. </head>
  25.  
  26.  <body>
  27. <div class="rotate">
  28.   <div class="offer-holder">1<span class="SecondsPerRotation">5</span></div>
  29.   <div class="offer-holder">2<span class="SecondsPerRotation">3</span></div>
  30.   <div class="offer-holder">3<span class="SecondsPerRotation">7</span></div>
  31.   <div class="offer-holder">4<span class="SecondsPerRotation">3</span></div>
  32.   <div class="offer-holder">5<span class="SecondsPerRotation">4</span></div>
  33.   <div class="offer-holder">6<span class="SecondsPerRotation">6</span></div>
  34. </div>
  35.  
  36. <script type="text/javascript">
  37. <!--
  38.     var speed = 3000;
  39.    
  40.     $("div.rotate div").hide().eq(1).show();
  41.     function rotate(){
  42.     var i = $("div.rotate div:visible").prevAll("div").length + 1;
  43.     i = i % $("div.rotate div").length;
  44.     $("div.rotate div").fadeOut().eq(i).fadeIn();
  45.     setTimeout("rotate()", speed);
  46.     };
  47.     rotate();
  48. //-->
  49. </script>

  51. </body>
  52. </html>

This works fine.

The final task is to set the speed for the rotations. Though the divs have the same name ("offer-holder"), the speeds may differ. For example, the first div may be 5 secs, the second one 10 secs, the third one 7 secs, and so on. The variable for the time ("SecondsPerRotation") is carried over from another page (I've not gotten far enough to write how to capture the variable yet).

I'm unsure how to modify the above code, so that it has the right time for each div. If I set it to "SecondsPerRotation", it uses that for all of them. I think what I want is something like - speed equals div.rotate div SecondsPerRotation value.

Any help is appreciated.

Thanks.

Stephen