Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Еще один jQuery слайдер контента (https://javascript.ru/forum/jquery/45714-eshhe-odin-jquery-slajjder-kontenta.html)

beta-it 13.03.2014 10:08

Еще один jQuery слайдер контента
 
В jQuery не силен, взял за
основу вот этот мануал: http://heavenweb.ru/delaem-prostoy-s...-jquery?page=1 убрал из него все лишнее для наглядности...
Сама работа слайда работает на ура и все устраивает, но необходимо добавить функционал анимации дочерних блоков каждого слайда...

Сделал на свой взгляд очень коряво и анимация не работает - с первого слайда: http://jsfiddle.net/a_semenov/K77Lu/ может есть у кого нибудь мысли по этому поводу?
Или готовое решение, что бы не изобретать велосипед?

рони 13.03.2014 11:50

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.