JQuery에서 이미지 탐색기를 둘러보기 려합니다.

Question

JQuery를 사용하여 간단한 이미지 탐색기를 만들고 있습니다. 우리는 총 3 개 이미지가있는 경우

그래서, 예를 들어,이 같이 보일 것입니다 :이 구현 .click()으로 .hide() 기능을 사용하고

Prev 1 2 3 Next 

.

그래서 한 탐색 옵션을 클릭 할 때마다 한 이미지 만 표시되고 나머지는 숨겨집니다.

나는 "1 2 3"링크가 작동하도록했습니다.

"이전"과 "다음"에 문제가 있습니다.

나는 그 (것)들을위한 주위를해야한다. 그래서 "1"을 누르고 "Prev"를 누르면 "3"으로 가야합니다. 또는 "3"을 누르고 "다음"을 누르면 "1"로 이동합니다. hideAll(index)은 "인덱스"에 의해 지정된 제외한 모든 이미지를 숨기는 기능입니다

//Write the onClick() event handler for "Prev" 
    $('#prev').click(function(){ 

     ind = ($('.image').index('.image:visible')+1); 

     if (ind == 1){ 
      hideAll(totalImages); 
     } 
     else{ 
      hideAll(ind-1); 
     } 
    }); 

    //Write the onClick() event hadler for "Next" 
    $('#next').click(function(){ 
     ind = ($('.image').index('.image:visible')+1; 

     if (ind == totalImages){ 
      hideAll(1); 
     } 
     else{ 
      hideAll(ind+1); 
     } 
    }); 

하는 것으로 :

나는 "이전"과 같은 "다음"에 대한 클릭 기능을 썼다.

그것은 다음과 같은 방법으로 제대로 작동하지 않습니다 : 나는 "이전"을 누르면 내가 다시 모든 이미지를 "이전"을 누를 때 나는 제대로 3. 에 결국 그러나, 1 일

비워 둬. "ind"값은 0이됩니다. 1 일부터

, 내가, 내가 제대로 차라리 3.

Answer 1

에가는 것보다, 다시 1에서 결국 내가 "다음"을 누르면, 2 에서 그러나 2에서 결국 "다음"을 누르면 인덱스의 첫 번째/마지막 이미지를 확인해야합니다. 이것은 귀하의 문제에 대한 완벽한 해결책은 아니지만 문제를 해결할 수있는 방법을 제시해야합니다.

previous() 및 next() 기능을 살펴보십시오.

// Cache jQuery results 
var element = $(this); 
var items = element.find(options.slideitem); 

// How many items to slide? 
var total = items.length; 
var count = 0; 

// Hide all items but not first item 
items.not(':first').hide(); 

// Calculate next item 
function next() {  
    (count == total - 1) ? count = 0 : count++; 
    transition(items, count); 
    return false 
}; 

// Calculate previous item 
function previous() { 
    (count == 0) ? count = total - 1 : count--; 
    transition(items, count); 
    return false 
}; 

// Do transition between two slides 
function transition(items, count) { 
    if (options.effect == 'show') { 
     items.hide().eq(count).show(); 
    }; 
    if (options.effect == 'fadeIn') { 
     items.css('position', 'absolute'); 
     items.fadeOut(options.fadespeed).eq(count).fadeIn(options.fadespeed); 
    }; 
};