버튼 이미지 반복 반복 클릭

저는 Javascript를 처음 사용하기 때문에 이미지 간을 이동하는 방법을 알아 내려고했습니다. 내 목표는 html의 이미지 자리 표시 자에 대한 코드를 변경하여 모든 버튼을 클릭 할 때 다음 이미지로 변경되도록하는 것입니다. 한 이미지를 다른 이미지 (getElementById ("mainImage"). src = "image2.jpg";)로 변경하는 방법을 알아 냈습니다. 그러나 다음 버튼 클릭시 "image3"에 도달 할 수 있어야합니다. 나는 변수를 사용할 필요가 가정,하지만 난 방법이 작동하도록하는 아무 생각이 ...버튼 이미지 반복 반복 클릭

출처

2012-06-17 Eric Wolf

어떤 HTML로 작업하고 있습니까? DOM의 구조는 무엇입니까? [JS Fiddle] (http://jsfiddle.net/), [JS Bin] (http://jsbin.com/) 또는 이와 유사한 라이브 데모로 이미 얻은 것을 보여줄 수 있습니까? 이미지 /'src'가 DOM/HTML 어딘가에 있거나 JavaScript 내의 배열에 있나요? –

당신은 스크립트에서 다음 스크립트 전에 일부 var key = 0;을 추가 할 수 있습니다 클릭 이벤트에 대한 조치를 제공

var image = "image" + key + ".jpg"; 
getElementById("mainImage").src= image; 
if(key == max){ 
key = 0; 
}else{ 
key++; 
}

여기서 max는 이미지 개수입니다.

하지만 jQuery를에 더 쉽고 더 나은 해결책이 될 수 있습니다 :

출처

2012-06-17 18:26:43

jQuery 란 무엇이며 어떻게 더 쉬울 수 있습니까? –

JQuery는 js에 대해 liblary이며 모든 것이 더 쉽습니다. 나는 그것을 배우는 것이 좋습니다 :) http://jquery.com/ –

가 전역으로 이러한 변수를 선언 끝 있지만 이것은 아마도 앞으로 이동하는 가장 쉬운 방법이라고 생각합니다.

var images = ["image1.jpg", "image2.jpg", "image3.jpg"]; 
var currentImage = 0; //defaults to image1.jpg 

function goNext() { 
    currentImage += 1; 

    //loop back to the first image 
    if(currentImage >= images.length) { 
     currentImage = 0; 
    } 

    document.getElementById("mainImage").src = images[currentImage]; 
}

그래서 버튼 클릭으로 goNext()를 호출하면됩니다.

기본적으로 배열은 항목 목록입니다.이 경우 이미지 어딘가에 참조하는 문자열입니다. 인덱싱을 통해 배열에서 항목을 가져올 수 있습니다. 이는 첫 번째 항목을 알려주는 것과 같습니다. 자바 스크립트에서는 이미지가됩니다 [0].

출처

2012-06-17 18:27:12 Jordan

버튼 이미지 반복 반복 클릭

답변

관련 문제