간단한 갤러리 슬라이더를 만들려고합니다.

Question

사용자가 슬라이더의 해당 버튼을 클릭 할 때마다 슬라이더에있는 이미지 컬렉션의 위치를 ​​왼쪽/오른쪽으로 '분로'하려고합니다.

$('#btnRight').click(function (e) { 
    e.preventDefault(); 
    if (parseInt(6 + indexx) != 10) { 
     indexx++; 
     $('#first').attr('src', $('#second').attr('src')); 
     $('#second').attr('src', $('#third').attr('src')); 
     $('#third').attr('src', $('#fourth').attr('src')); 
     $('#fourth').attr('src', $('#fifth').attr('src')); 
     $('#fifth').attr('src', $('#sixth').attr('src')); 
     $('#sixth').attr('src', '/Content/Images/Gallery/Thumbs/' + parseInt(6 + indexx) + '.png'); 
    } 
}); 

당신은 그것을 수동으로 각을 선택 있다고 볼 수 있습니다 :이 작업을 가지고 있지만 코드가 조금 크고 반복적 그래서 내가 조금 그것을 취소하려고했는데,이 그것에서이다는 현재 상태입니다 요소를 선택하고 소스 속성을 스 R 핑하여 이미지를 오른쪽으로 이동하십시오. 여기

내가 개선 작업했던 코드 만 잘 작동을하지 않습니다 :

$('#btnLeft').click(function (e) { 
    e.preventDefault(); 
    $("#gallerySlider img").each(function (index) { 
     $(this).attr("src", $(this).prev().attr("src")); 
    }); 
}); 

이 현재 컬렉션의 첫 번째 이미지를 소요하고 그냥 모든 이미지의 소스를 설정합니다 #gallerySlider이 잘못되었습니다. 그러나 경고에 같은 코드를 넣으면 이미지가 올바르게 표시되고 이전 코드가 표시됩니다. 출력과 유사합니다

/Content/Images/Design/Thumbs/10.png Previous Image: /Content/Images/Design/Thumbs/9.png

그래서 제대로 이미지를 선택하고 오른쪽 src 날 환원 그러나있어 동일한 하나에 슬라이더의 모든 이미지의 소스를 설정 않는 이유는 무엇입니까?

$(this).prev().attr("src")

는 각각에 대해 서로 다른 것인가

: 분명히 그것은 그들 모두와 통과해야합니까?

어디에서 내가 잘못 본 사람이 있습니까? 등

는 "img1.jpg"을 이미지 2를 설정합니다 뒀다 코드

감사합니다

Answer 1

user1166905 님의 답변은 아주 괜찮은 것 같습니다. 해결 방법은 왼쪽으로 이동하려는 경우 div의 첫 번째 요소를 div의 끝에 배치하는 것입니다. 오른쪽을 누르면 동일하게 적용됩니다. 목록에서 마지막 요소를 가져 와서 div에서 제거하고 갤러리 div 시작 부분에 다시 배치합니다.

$('#btnLeft').click(function (e) { 
    e.preventDefault(); 
    $('#gallerySlider').append($("#gallerySlider img").first()); 
}); 

$('#btnRight').click(function (e) { 
    e.preventDefault(); 
    $('#gallerySlider').prepend($("#gallerySlider img").last()); 
}); 

나는 그

Answer 2

당신이 이미지 1 "img1.jpg"이미지 2입니다 상상 경우 "img2.jpg" , 그 다음에는 이미지 3을 이미지 2의 src로 설정합니다.이 이미지는 이제 "img1.jpg"가 될 것이고이 이미지는 결국 모든 이미지의 src가 될 것입니다. 말이 돼?

jQuery 유형 갤러리 플러그인을 온라인으로 보았습니다. 거기에 부하가있어 작업을 수행 할 수 있습니까?