자바 스크립트/jQuery를 이미지 슬라이더 문제

Question

바이올린 : https://jsfiddle.net/8na2n5L2/

내가 이미지 슬라이더를 만들려고 해요,하지만 몇 가지 이유로 그냥이 작동하지 않는 이유는 주위에 내 머리를 정리하고 수 없습니다. 나는 기본적으로 이미지가 오른쪽 (화면에서 벗어남)에서 들어오는 슬라이더를 만들고, 중심 이미지는 왼쪽 (화면에서 벗어남)으로 푸시하려고합니다. 그런 다음 왼쪽 이미지가 다시 센터로 갈 때가되면 중앙으로 가기 전에 다시 오른쪽으로 빠르게 돌아갑니다.

jQuery를 (문서) .ready (함수() {

var images = []; 

//store the images in an array 
jQuery('.main-image-slider').each(function() { 
    images.push(jQuery(this)); 
}); 

var i = 0; 
var max = images.length - 1; 

setInterval(function() { 
    if (i > max) { 
     i = 0; 
    } 

    images[i].removeClass('main-image-slider-left').addClass('main-image-slider-right').delay(100).queue(function() { 
     images[i].removeClass('main-image-slider-right').addClass('main-image-slider-center').dequeue(); 
     i++; 
    }); 


    if (images[i - 1]) { 
     images[i - 1].removeClass('main-image-slider-center').addClass('main-image-slider-left'); 
    } 


}, 3000); 

}); 코드가 images[i].removeClass('main-image-slider-right')...를 실행 한 후, i++이 먼저 실행 때문에

Answer 1

I get this console error "Uncaught TypeError: Cannot read property 'removeClass' of undefined".

이 오류입니다.

images[i].removeClass('main-image-slider-left').addClass('main-image-slider-right').delay(100).queue(function() { 
    // the 'i' is already added 1, so it may equal images[max], so you got that error 
    images[i].removeClass('main-image-slider-right').addClass('main-image-slider-center').dequeue(); 
}); 

당신은 queue으로 i++를 이동할 수 있습니다 : 당신이 시도 할 수

images[i].removeClass('main-image-slider-left').addClass('main-image-slider-right').delay(100).queue(function() { 
    images[i].removeClass('main-image-slider-right').addClass('main-image-slider-center').dequeue(); 
    // after all the animation is done, at the end of queue update 'i'. 
    i++; 
}); 

.

참고 : 코드 끝에 i++을 제거하는 것을 잊지 마십시오.

업데이트

업데이트가 if (images[i - 1])으로 클래스를 업데이트하지 않습니다 슬라이드의 가장자리에 jsfiddle 코드

이, 꼬마 필요가 항상 이전 슬라이드의 클래스를 업데이트합니다. 그래서 코드를

images[i == 0 ? images.length - 1 : i - 1].removeClass('main-image-slider-center').addClass('main-image-slider-left');