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:
#slider #frame { float: left; position: relative; z-index: 1; width: 350px; height: 585px; background: #111; opacity: 0.5; } #slider #frame p { color: #fff; position: relative; opacity: 1.0; z-index: 3; }
Slider:
<script type="text/javascript"> function theRotator() { //Set the opacity of all images to 0 $('#slider ul li').css({opacity: 0.0}); //Get the first image and display it (gets set to full opacity) $('#slider ul li:first').css({opacity: 1.0}); setInterval('rotate()',9000); } function rotate() { //Get the first image var current = ($('#slider ul li.show')? $('#slider ul li.show') : $('#slider ul li:first')); if ( current.length == 0 ) current = $('#slider ul li:first'); var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('#slider ul li:first') :current.next()) : $('#slider ul li:first')); //Set the fade in effect for the next image, the show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 6000); //Hide the current image current.animate({opacity: 0.0}, 3000) .removeClass('show'); }; $(document).ready(function() { theRotator(); $('#slider').fadeIn(3000); $('#slider ul li').fadeIn(1000); // tweek for IE }); </script>
Z góry dzięki za pomoc.