Jquery: пусть он выберет следующее изображение, и мне не нужно ставить

Question

С помощью моего кода я могу получить div для прокрутки 4 изображений, но если вы посмотрите на код, мне придется продолжать добавлять «.next», чтобы получить его для перехода к другому изображению. Я не хочу определять количество изображений для прокрутки в jquery, я хочу, чтобы jquery продолжал просматривать в div столько изображений, сколько у меня было, прокручивал все из них и затем возвращался к началу. просто взгляните на мой код. Я не хочу использовать другой плагин, потому что я почти выполнил то, что хочу, всего за несколько строк кода по сравнению с плагинами с несколькими килобайтами.

ps: я не знаю, зачем нужен '-165px', но он делает все идеально выровненным при прокрутке от картинки к картинке.

Jquery:

Jquery:

$(document).ready(function(){
    $('.rotate_container').everyTime(10, function (){
        $('.rotate_container').animate({scrollTop: $('img').offset().top - 165}, 2000).delay(1000)
        .animate({scrollTop: $("img").next().offset().top - 165}, 2000).delay(1000)                   
        .animate({scrollTop: $("img").next().next().offset().top - 165}, 2000).delay(1000)
        .animate({scrollTop: $("img").next().next().next().offset().top - 165}, 2000).delay(1000)
    });
});

Есть идеи?

Answer 1

Я не проверял, но похоже, что это будет работать

$(document).ready(function(){
    var container = $('.rotate_container');
    var images = container.find('img');
    container.everyTime(10, function (){
        images.each(function() {
            container.animate({scrollTop: $(this).offset().top - 165}, 2000).delay(1000);
        });
    });
});

Answer 2

рекурсия. Напишите функцию, которая будет делать то, что вы хотите (я бы помог с конкретным кодом, но я не знаю, для чего вы собираетесь). Имейте функцию взять в первом изображении. Делайте в функции то, что вы хотите, и перед закрытием функции вызовите функцию, в которой вы находитесь, и отправьте ей переменную .next ().

Answer 3

Можно проверить jCarousel или его младшего брата, jCarouselLite, которые выполняют прокрутку изображений с легкими эффектами.

Для решения вышесказанного вы можете назначить первое img переменной, а затем увеличить его при обратном вызове. В следующем коде вывод предупреждения «Второй»:

<div>First</div>
<div>Second</div>
<script type="text/javascript">
$(document).ready(function(){
    var test = $('div');
        test = test.next();
        alert(test.html());
});
</script>

Итак, чтобы изменить ваш код:

$(document).ready(function(){
    var img = $('.rotate_container img');
    $('.rotate_container').everyTime(10, function (){
        $('.rotate_container').animate({scrollTop: img.offset().top - 165}, 2000,null,function() { img = img.next(); }).delay(1000)
        .animate({scrollTop: img.offset().top - 165}, 2000,null,function() { img = img.next(); }).delay(1000)
        .animate({scrollTop: img.offset().top - 165}, 2000,null,function() { img = img.next(); }).delay(1000)
          .animate({scrollTop: img.offset().top - 165}, 2000,null,function() { img = img.next(); }).delay(1000)
    });
});

и т.д..

Возможно, можно изменить это, используя функцию, чтобы сделать ее еще чище.

Answer 4

Мое решение требует, чтобы вы поместили еще один div в ваш контейнер и одно правило css.Это выглядит так:

<script type="text/javascript">
$(document).ready(function(){
    var top = 0;
    var up = true;
    var wrap = $(".rotate_container > div ") // shortcut :)

    function slide() {
        wrap.animate( { "top" : top+"px" }, 400 );

        if( Math.abs( top ) > wrap.height() ){ // if all inner_wrap is outside container
            up = false; 
        }
        else if( top >= 0 ) {
            up = true
        }
        if( up ) top -= 165;
        else top += 165;

        setTimeout( slide, 500 ) // call function slide after 500 ms
    }
    setTimeout( slide, 500 ) // call function slide after 500 ms
});
</script>

<style type="text/css">
.rotate_container {
    max-height:292px;
    max-width:760px;
    height:292px;
    width:760px;
    overflow:hidden;
    padding:0;
    margin:0;}

.rotate_container > div {
    position: relative;
    top: 0; left: 0;
}

.rotate_container img {
    height:292px;
    width:760px;}
</style>


<div class="rotate_container grid_12">
    <div id="inner_wrap">
        <img src="{{ MEDIA_URL }}/employlogo.png" class="top" />
        <img src="{{ MEDIA_URL }}/employlogo.png" class="middle" />
        <img src="{{ MEDIA_URL }}/employlogo.png" class="midbottom" />
        <img src="{{ MEDIA_URL }}/employlogo.png" class="bottom" />
        <img src="{{ MEDIA_URL }}/employlogo.png" class="verybottom" />
    </div>
</div>

Ну, это не красиво, но работает.Сначала я неправильно понял ваш фрагмент, извините.

Answer 5

http://flesler.blogspot.com/2007/10/jqueryscrollto.html этот плагин имеет обещание.