이전 및 jQuery를 배열의 다음

Question

나는 배열에 저장되어있는 이미지를 회전이 jQuery 코드가 있습니다

index = 0; 

$('.thumbnail').click(function(){ 
    $('.large_view').show(); 
    $('.large_view').prepend('<img src="'+images[index]+'" width="450px"/>'); 
}); 

$('.next').click(function(){ 
    index = (index==images.length-1)?0:(index+1); 
    $('.large_view img').attr('src',images[index]); 
}); 

$('.previous').click(function(){ 
    index = (index===0)?(images.length-1):(index-1); 
    $('.large_view img').attr('src',images[index]); 
}); 

그러나 문제는 그 index = 0;의 같은 이미지를 항상 보여주기 때문에, 아니다를 클릭 한 것. 문제를 해결해야하지만 여전히 .previous 및 .next을 클릭하면 배열에 이전/다음 항목을 표시 할 수 있습니다.

어떻게해야합니까?

Answer 1

작은 도우미 자바 스크립트 함수를 사용하여 "다음"과 "이전"을 파악할 수 있습니다. 아래 정의 된대로 previousIndex 및 nextIndex 메서드를 확인하십시오. 내가 상상할 수있는 가장 간단한 HTML을 사용했습니다.

큰 이미지의 소스를 (본 코드에서) 설정하지 않았으므로 목록의 첫 번째 이미지에 이미지를 초기화하는 선을 추가했습니다. 이것을 시도해보고 이것이 당신이 찾고 있던 행동인지보십시오.

var index = 0; 
 

 
var images = [ 
 
    'http://placehold.it/300&text=first+picture', 
 
    'http://placehold.it/300&text=second+picture', 
 
    'http://placehold.it/300&text=third+picture' 
 
]; 
 

 
var previousIndex = function(index, length) { 
 
    if (index <= 0) { 
 
    return length - 1; // cycle backwards to the last image 
 
    } else { 
 
    return index - 1; 
 
    } 
 
} 
 

 
var nextIndex = function(index, length) { 
 
    return ((index + 1) % length) 
 
}; 
 

 
$('.next').click(function() { 
 
    index = nextIndex(index, images.length); 
 
    $('.large_view img').attr('src', images[index]); 
 
}); 
 

 
$('.previous').click(function() { 
 
    index = previousIndex(index, images.length); 
 
    $('.large_view img').attr('src', images[index]); 
 
}); 
 

 
/** initialize the image on load to the first one */ 
 
$('.large_view img').attr('src', images[index])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href='#' class='next'>next</a> 
 
<a href='#' class='previous'>prev</a> 
 
<div class="large_view"> 
 
    <img /> 
 
</div>