Witam,

znalazłem i przerobiłem prosty slider, który co X sekund zmienia zdjęcie. Problem jest w tym, że na tym zdjęciu jest DIV z tekstem. Slider działa tak, że ma efekt zanikania obrazka (fade+opacity). Jak zanika obrazek to zanika też DIV z tekstem.

Kombinowałem z z-index, ale nic nie wychodzi...

Kod:

  1. #slider #frame {
  2. float: left;
  3. position: relative;
  4. z-index: 1;
  5. width: 350px;
  6. height: 585px;
  7. background: #111;
  8. opacity: 0.5;
  9. }
  10.  
  11. #slider #frame p {
  12. color: #fff;
  13. position: relative;
  14. opacity: 1.0;
  15. z-index: 3;
  16. }


Slider:

  1. <script type="text/javascript">
  2.  
  3. function theRotator() {
  4. //Set the opacity of all images to 0
  5. $('#slider ul li').css({opacity: 0.0});
  6.  
  7. //Get the first image and display it (gets set to full opacity)
  8. $('#slider ul li:first').css({opacity: 1.0});
  9.  
  10. setInterval('rotate()',9000);
  11. }
  12.  
  13. function rotate() {
  14. //Get the first image
  15. var current = ($('#slider ul li.show')? $('#slider ul li.show') : $('#slider ul li:first'));
  16.  
  17. if ( current.length == 0 ) current = $('#slider ul li:first');
  18.  
  19. var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('#slider ul li:first') :current.next()) : $('#slider ul li:first'));
  20.  
  21. //Set the fade in effect for the next image, the show class has higher z-index
  22. next.css({opacity: 0.0})
  23. .addClass('show')
  24. .animate({opacity: 1.0}, 6000);
  25. //Hide the current image
  26. current.animate({opacity: 0.0}, 3000)
  27. .removeClass('show');
  28.  
  29. };
  30.  
  31. $(document).ready(function() {
  32. theRotator();
  33. $('#slider').fadeIn(3000);
  34. $('#slider ul li').fadeIn(1000); // tweek for IE
  35. });
  36.  


Z góry dzięki za pomoc.