오른쪽 및 왼쪽 버튼이있는 이미지 갤러리

Question

저는 jQuery와 Javascript를 처음 사용했습니다!

아래의 작은 미리보기 이미지를 클릭하면 해당 이미지가 선택되고 더 큰 상자에 표시되는 이미지 갤러리를 만들었습니다.

내가 추가하고 싶은 것은 클릭 한 큰 이미지의 양면에있는 버튼으로 이미지를 왼쪽 또는 오른쪽으로 변경합니다.

그래서이 이미지를 클릭에 대한 코드이고 그것을 당신이 클릭 이미지로 변경 : P

(https://imagizer.imageshack.us/v2/757x654q90/34/t4y1.png 예 :) :

<script type="text/javascript"> 
    function changePic(img) { 
     $("#gallery_img").hide(); 
     $("#gallery_img").attr ("src", img.src); 
     $("#gallery_img").fadeIn("slow")     
    } 
</script> 

문제는 그냥 방법을 알아낼 수 없다

그리고 이것은 HTML 부분 (이미지 만 버튼)입니다 : 사전에

  <div id="gallery_buttons"> 
       <img id="right" src="pics/right.png"></img> 
       <img id="left" src="pics/left.png"></img> 
      </div> 

감사합니다! :)

Answer 1

Dunno가 해결책을 찾고 있는지 여부는 여기에 나와 있지만 여기에서는 할 수있는 예를 제시합니다. 다음은 HTML

<div id="prev">Prev</div> 
<div id="next">Next</div> 
<ul> 
    <li class="thumb"><img src="http://i.imgur.com/CdxLTkH.png"/></li> 
    <li class="thumb"><img src="http://i.imgur.com/N4MgWLu.png"/></li> 
    <li class="thumb selected"><img src="http://i.imgur.com/KJyey9r.png"/></li> 
    <li class="thumb"><img src="http://i.imgur.com/8nqKP4I.png"/></li> 
    <li class="thumb"><img src="http://i.imgur.com/vuvPGHg.png"/></li> 
</ul> 


<img id="gallery_img" src="#"/> 

JQuery와

$("li").click(function(){ 

    var img = $(this).find('img').attr('src'); 
    $("ul").children().removeClass('selected'); 
    $(this).addClass('selected'); 
    $("#gallery_img").attr("src", img); 
}); 


$('#prev').click(function(){ 
    var prev = $(".selected").prev(); 
    var img = prev.find('img').attr('src'); 
    $("#gallery_img").attr("src", img); 
    $("ul").children().removeClass('selected'); 
    prev.addClass('selected'); 
}); 

$('#next').click(function(){ 
    var next = $(".selected").next(); 
    var img = next.find('img').attr('src'); 
    $("#gallery_img").attr("src", img); 
    $("ul").children().removeClass('selected'); 
    next.addClass('selected'); 
}); 

당신이 그 코드의 예를 볼 수 jsfiddle입니다. http://jsfiddle.net/gdSD2/

분명히 정말 거칠고 정리할 수 있지만 작동합니다. 또한 사용자가 목록의 끝에 도달하면 계정을 기억해야합니다. 다음 또는 이전 형제가없는 경우에 대한 절을 추가하십시오.