여러 이미지를 스왑하는 방법

프로그래밍에 대한 지식이 거의 없습니다. 당신이 터치 스크린에 표시 될 때 상여가 또한 잘 작동하는 때 원본 이미지에 돌려 보내는 그것의 장소 그리고 또 다른 누르기에서 또 다른 한개를 적재하는 원인이 될 심상에 쥐를 누르는 것을 허용하는 javascript의이 중대한 작은 조금을 찾아 냈다 브라우저. 사진을 찍기 전후에 그것을 표시하려고했습니다. 그러나이 코드는 하나의 이미지 만 화면에 표시하도록 허용합니다. 누구나 페이지에 세로 형식으로 원하는만큼 많은 이미지를 표시 할 수 있도록 코드를 설명하거나 제공함으로써 도움을받을 수 있습니까? 귀하의 도움을 크게 주시면 감사하겠습니다. 여기 여러 이미지를 스왑하는 방법

코드입니다 :

</body> 
</html> 
<SCRIPT LANGUAGE=JavaScript> 
intImage = 2; 
function swapImage() { 
switch (intImage) { 
case 1: 
    IMG1.src = "http://www.danhero.com/riggs1.jpg" 
    intImage = 2 
    return(false); 
case 2: 
    IMG1.src = "http://www.danhero.com/riggs2.jpg" 
    intImage = 1 
    return(false); 
} 
} 
</SCRIPT> 
</HEAD> 
<BODY><center> 
<IMG id="IMG1" name="IMG1" src="http://www.danhero.com/riggs1.jpg" 
onclick="swapImage();"> 
</BODY> 
</HTML>

코드는 그런 식으로 작동

출처

2014-02-15 user3313868

<!doctype html> 
<html> 
<head> 
<style> 
#place img { 
    display: block; 
    margin: 10px 0; 
} 
</style> 
</head> 
<body> 
<div id="place"> 
</div> 
<script> 
var p = document.getElementById('place'); 
var images = [ 
    ["http://www.danhero.com/riggs1.jpg", "http://www.danhero.com/riggs2.jpg"], 
    ["http://www.danhero.com/riggs1.jpg", "http://www.danhero.com/riggs2.jpg"] 
]; 

function swapImage() { 
    var id = +this.id.substring(3); 
    if(this.src === images[id][0]) this.src = images[id][1]; 
    else this.src = images[id][0]; 
} 

for(var i = 0, l = images.length; i < l; ++i) { 
    var dt = document.createElement('img'); 
    dt.setAttribute('id', 'img' + i); 
    dt.setAttribute('src', images[i][0]); 
    dt.onclick = swapImage; 
    p.appendChild(dt); 
} 
</script> 
</body> 
</html>

: 페이지 동안

이 ID가 "장소"와 함께 빈 DIV를로드 배열 "이미지"의 이미지로 채워집니다 .

이 변수는 이미지 당 두 개의 링크가있는 배열이며, 먼저 이미지를 표시하고 두 번째로 사용합니다. 카운터가 없으면 이미지의 소스 (src)가 검사되고 배열의 첫 번째 요소와 일치하면 이미지가 두 번째로 스왑되고 그 반대의 경우도 마찬가지입니다.

이미지의 id = "img"+ i는 i가 카운터 (img0, img1, img2 등)입니다.

터치 스크린에서 체크 표시는 없지만 터치 이벤트가있는 iPhone에서도 지원되는 클릭 이벤트에 해당합니다.

출처

2014-02-15 18:24:47 Evil

안녕하세요 EvilJS입니다. 아마도이 댓글 섹션을 잘못 사용했을 것입니다.하지만 놀랍도록 빠른 응답과 완벽한 답변에 감사드립니다. 그게 내가 원했던 것처럼 일을 해줬고 정말 도움을 주셔서 감사합니다. 건배 – user3313868

한 가지만 더, 표시되는 이미지 사이에 휴식 시간을 추가하는 방법은 무엇입니까? 많은 감사합니다. – user3313868

스타일 섹션에 여백을 추가했습니다. - 10px 0은 세로로 10px 여백을주고 가로는 0을 의미합니다. 환호;) – Evil

답변

관련 문제