Jquery : ".next(). next(). next() 등을 넣지 않아도 다음 이미지를 계속 선택 했습니까?

Question

제 코드를 사용하면 div로 4 개의 이미지를 스크롤 할 수 있습니다. 코드, 다른 이미지로 스크롤하려면 '.next'추가 유지해야합니다. jquery 통해 스크롤 할 이미지의 양을 결정하고 싶지 않아, jquery 많은 div 이미지를 가지고 있고, 스크롤하여 모든 것을 스크롤 한 다음 맨 위로 스크롤합니다. 코드를 살펴 보겠습니다. 다른 플러그인을 사용하고 싶지는 않습니다. 여러 KB 플러그인과 비교했을 때 코드 줄이 더 복잡합니다.

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

나는 그것을 테스트하지 않았다하지만 내 솔루션은 당신이 당신의 용기와 하나의 CSS 규칙 내에서 하나의 추가 div를 넣어 필요

$(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

작동처럼이 보인다. 다음과 같이 바뀝니다.

<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의 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() 변수를 보냅니다.