단추를 클릭 할 때 이미지를 변경하는 방법

Question

단추를 눌러 이미지를 변경하고 싶습니다. 두 단추가 있습니다. 한 단추는 다음이고 다른 단추는 이전입니다. 다음 단추를 눌러 새 이미지를 표시하고 마지막 단추를 눌러야합니다. 이미지는 agian이되어야합니다.하지만 제대로 처리 할 수 ​​없습니다. jquery를 사용하여 어떻게해야합니까?

$(document).ready(function() { 
$('#image2').hide(); 
$('#image3').hide(); 
$(".arrow").click(function() { 
     $('#image1').hide(); 
     $('#image2').show(); 
    }); 
}); 

HTML은

<div class="imageDiv"> 
    <div><img src="potraits.jpg" class="image" id="image1"/></div> 
    <div><img src="pot.jpg" class="image" id="image2"/></div> 
    <div><img src="potri.jpg" class="image" id="image3"/></div> 
    <div><input type="image" src="arrow.gif" class="arrow"/></div> 
    <div><input type="image" src="leftarrow.gif" class="leftarrow"/></div> 
</div> 

Answer 1

http://jsfiddle.net/S6t9R/4/

기본적으로

$(document).ready(function() { 
    $('img:not(:first)').hide(); 
    $(".arrow").click(function() { 
     $('img:not(:last):visible'). 
     hide(). 
     parent(). 
     next(). 
     children(). 
     show(); 
    }); 
    $(".leftarrow").click(function() { 
     $('img:not(:first):visible'). 
     hide(). 
     parent(). 
     prev(). 
     children(). 
     show(); 
    }); 
}); 

, 볼 수있는 이미지는 이제 숨겨져 및 이전/다음 이미지입니다 이제 볼 수 있습니다.

Answer 2

얼마나 이미지 SRC 변경에 대한?

자바 스크립트 :

var images = [ 
    "alpha.jpg", 
    "beta.jpg", 
    "gamma.jpg" 
]; 
var actImg = 0; // index of actual image 

$(document).ready(function() { 
    $(".leftarrow").click(function() { 
     if (actImg <= 0) { // if first image is displayed, jump to last 
      actImg = images.length - 1; 
     } 
     else { 
      actImg--; 
     } 
     $('#onlyimage').attr('src', images[actImg]); 
    }); 
    $(".rightarrow").click(function() { 
     if (images.length <= actImg) { // if last image is displayed, jump to first 
      actImg = 0; 
     } 
     else { 
      actImg++; 
     } 
     $('#onlyimage').attr('src', images[actImg]); 
    }); 
}); 

HTML :

<div class="imageDiv"> 
    <div><img src="alpha.jpg" class="image" id="onlyimage"/></div> 
    <div><input type="image" src="leftarrow.gif" class="leftarrow"/></div> 
    <div><input type="image" src="rightarrow.gif" class="rightarrow"/></div> 
</div> 

Answer 3

어쩌면이 경우 당신은/숨기기 이미지 주위 DIV 요소를 표시 할 수있다. 당신이하는 것처럼 이미지를 숨기면 div 자체가 여전히 문서에서 '볼 수 있습니다', 이는 아마 당신에게 원치 않는 결과를 줄 것입니다.

LEFTARROW를 들어

Answer 4

Change your script, 

$(document).ready(function() { 
    $('#secondimage').hide(); 
    $('#thirdimage').hide(); 
$(".arrow").click(function() { 
    $('#firstimage').hide(); 
    $('#secondimage').show(); 
    }); 
$(".leftarrow").click(function() { 
    $('#firstimage').show(); 
    $('#secondimage').hide(); 
    }); 
}); 

Answer 5

$(document).ready(function() { 
    that = this; 
    this.arrayImages = $('.image'); 
    this.currentPosition = 0; 
    $('#secondimage').hide(); 
    $('#thirdimage').hide(); 
    $(".arrow").click(function() { 
     if (that.currentPosition < that.arrayImages.length) { 
      that.arrayImages[that.currentPosition].hide(); 
      that.arrayImages[that.currentPosition+1].show(); 
      that.currentPosition++; 
     } 
    }); 
}); 

는 그냥 다른 방법으로 (: