JQuery: сохраните выбор следующего изображения без меня, чтобы поставить «.next(). Next(). Next() и т. Д.

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

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

Answer 3

Мое решение требует от вас поставить один дополнительный 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 4

Можете проверить 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 5

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