Еще один jQuery слайдер контента
В jQuery не силен, взял за
основу вот этот мануал: http://heavenweb.ru/delaem-prostoy-s...-jquery?page=1 убрал из него все лишнее для наглядности... Сама работа слайда работает на ура и все устраивает, но необходимо добавить функционал анимации дочерних блоков каждого слайда... Сделал на свой взгляд очень коряво и анимация не работает - с первого слайда: http://jsfiddle.net/a_semenov/K77Lu/ может есть у кого нибудь мысли по этому поводу? Или готовое решение, что бы не изобретать велосипед? |
beta-it,
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script src="https://code.jquery.com/jquery-latest.js"></script> <style type='text/css'> *{ margin: 0; padding: 0; } #slider-wrap { /* Оболочка слайдера и кнопок */ width:100%; height: 100%; } #slider { /* Оболочка слайдера */ width:100%; height:200px; overflow: hidden; position:relative; } .slide { /* Слайд */ width:100%; height:100%; display: none; position: relative; top: 0px; } .sl1 { position: relative; left:-100%; margin: -50% auto; background:black; width: 100px; top:50px; height:100px; } </style> <script> $(function() { var slides = $('.slide') ,len = slides.length, n = len-1; function rotator() { var slide = slides.eq(n); slide.hide(); n = ++n % len; slide = slides.eq(n); slide.show(); var sl1 = $('.sl1', slide); sl1.css({left:'-100%'}).animate({left : '0%'}, 1000).delay(1000).animate({left : '100%'}, 1000, rotator); } rotator() }); </script> </head> <body> <section id="slider-wrap"> <div id="slider"> <div class="slide active" style="background: red; background-position: 50% 0%; background-repeat: repeat no-repeat;"> <div class="sl1" style="color: white">11111</div> </div> <div class="slide" style="background:blue; background-position: 50% 0%; background-repeat: repeat no-repeat;"> <div class="sl1" style="background: white;">22222</div> </div> <div class="slide" style="background:yellow; background-position: 50% 0%; background-repeat: repeat no-repeat;"> <div class="sl1" style="background: green;">33333</div> </div> </div> </section> </body> </html> |
Часовой пояс GMT +3, время: 02:09. |