Timeline of actions

Timeline of actions

hi friends,

I want a timeline of action with 3 action: fade-in, delay, fade-out. In summarize the total timeline is:

5000 ms delay on picture 1
1000 ms fadeout on picture 1 (start action in 5000 ms of timline)

1000 ms fadein on picture 2 (start action in 6000 ms of timline)
5000 ms delay on picture 2 (start action in 7000 ms of timline)
1000 ms fadeout on picture 2 (start action in 12000 ms of timline)

1000 ms fadein on picture 3 (start action in 13000 ms of timline)
5000 ms delay on picture 3 (start action in 14000 ms of timline)
1000 ms fadeout on picture 3 (start action in 19000 ms of timline)

1000 ms fadein on picture 4 (start action in 20000 ms of timline)
5000 ms delay on picture 4 (start action in 21000 ms of timline)
1000 ms fadeout on picture 4 (start action in 26000 ms of timline)

1000 ms fadein on picture 5 (start action in 27000 ms of timline)
5000 ms delay on picture 5 (start action in 28000 ms of timline)
1000 ms fadeout on picture 5 (start action in 33000 ms of timline)

1000 ms fadein on picture 6 (start action in 34000 ms of timline)
5000 ms delay on picture 6 (start action in 35000 ms of timline)
1000 ms fadeout on picture 6 (start action in 40000 ms of timline)

1000 ms fadein on picture 7 (start action in 41000 ms of timline)

my html code is here:
  1. <!-- Start Slider  -->
  2. <div class="myslider" style="width:558px; height:250px;">
  3. <div class="slider_items" id="slider_item_1">
  4. <a href="./" target="_blank" style="position:relative;width:100%;">
  5. <img src="images/sl1.jpg" width="558" height="250" />
  6. </a>
  7. </div>
  8. <div class="slider_items" id="slider_item_2">
  9. <a href="./" target="_blank">
  10. <img src="images/sl2.jpg" width="558" height="250" />
  11. </a>
  12. </div>
  13. <div class="slider_items" id="slider_item_3">
  14. <a href="./" target="_blank">
  15. <img src="images/sl3.jpg" width="558" height="250" />
  16. </a>
  17. </div>
  18. <div class="slider_items" id="slider_item_4">
  19. <a href="./" target="_blank">
  20. <img src="images/sl4.jpg" width="558" height="250" />
  21. </a>
  22. </div>
  23. <div class="slider_items" id="slider_item_5">
  24. <a href="./" target="_blank">
  25. <img src="images/sl5.jpg" width="558" height="250" />
  26. </a>
  27. </div>
  28. <div class="slider_items" id="slider_item_6">
  29. <a href="./" target="_blank">
  30. <img src="images/sl6.jpg" width="558" height="250" />
  31. </a>
  32. </div>
  33. <div class="slider_items" id="slider_item_7">
  34. <a href="./" target="_blank">
  35. <img src="images/sl7.jpg" width="558" height="250" />
  36. </a>
  37. </div>
  38. </div>
  39. <!-- End Slider  -->

my javascript code is here:
  1. $(document).ready(function() {

  3. $('.slider_items').hide();
  5. var dtime = 5000;
  6. var ftime = 1000;
  8. $('#slider_item_1').delay(dtime).fadeOut(ftime);
  9. $('#slider_item_2').delay(dtime).fadeIn(ftime);
  10. $('#slider_item_2').delay(dtime).fadeOut(ftime);
  11. $('#slider_item_3').delay(dtime).fadeIn(ftime);
  12. $('#slider_item_3').delay(dtime).fadeOut(ftime);
  13. $('#slider_item_4').delay(dtime).fadeIn(ftime);
  14. $('#slider_item_4').delay(dtime).fadeOut(ftime);
  15. $('#slider_item_5').delay(dtime).fadeIn(ftime);
  16. $('#slider_item_5').delay(dtime).fadeOut(ftime);
  17. $('#slider_item_6').delay(dtime).fadeIn(ftime);
  18. $('#slider_item_6').delay(dtime).fadeOut(ftime);
  19. $('#slider_item_7').delay(dtime).fadeIn(ftime);
  21. });
but this is not work correctly.

I also attached the complete files for easy testing.

I'm new-by with java-script time actions. 
 
please help. 
thanks