배열에서 이미지를 선택하고 계속하십시오.

처음으로 JavaScript 코더는 여기에 있습니다.배열에서 이미지를 선택하고 계속하십시오.

해당 이미지의 해당 단추를 클릭 한 다음 함수가 계속해서 배열의 다른 이미지를 표시하고 반복 할 때 이미지가 표시되도록이 문제를 해결하려고합니다.

예를 들어 배너가 이미지 4를 표시하고 사용자가 이미지 2의 버튼을 클릭하면 배너는 이미지 2를 표시 한 다음 회전하여 이미지 3을 표시하고 루핑을 계속 수행해야합니다.

var i = 0; 
var baners = new Array(); 
baners.push('banner1.jpg'); 
baners.push('banner2.jpg'); 
baners.push('banner3.jpg'); 
baners.push('banner4.jpg'); 
baners.push('banner5.jpg'); 



function swapImage(){ 
var img = document.getElementById("banner"); 
    img.src = baners[i]; 
    if (i<(baners.length-1)){i++; 
    }else{ 
     i=0; 
    } 

setTimeout('swapImage()', 2000);   

} 



function button1(){ 
    var img = document.getElementById("banner"); 
    img.src = baners[0] 

}

는 5 개 버튼에 하나 개의 글로벌 기능을 할 수 있다면 확실하지 오전 : 여기

는 코드입니다.

감사합니다.

출처

2014-02-05 MostOner

단추의 인덱스를 잡고 배열의 인덱스와 일치시킵니다. –

선택한 이미지가 표시되지만 함수는 인덱스를 통해 스크롤을 계속하고 그 순서를 따르지 않습니다. – MostOner

Btw,'baners'는'banners' 철자로 매번 문자열을'eval'하는 대신'setInterval (swapImage, 2000)'을 사용하십시오. – Bergi

5 개의 버튼에 대해 하나의 전역 기능을 만들 수 있는지 확신 할 수 없습니다.

예. 이 같은 것을 사용

function buttonClicked(number) { 
    var img = document.getElementById("banner"); 
    img.src = baners[number] 
    i = number; // set current loop position 
}

다음 등등 단추 2에서 단추 1에서 buttonClicked(0), buttonClicked(1)를 호출합니다. for 루프를 사용하여 핸들러를 버튼에 자동으로 연결하려면 JavaScript closure inside loops – simple practical example을 확인하십시오.

출처

2014-02-05 16:54:44 Bergi

고마워요! 이것은 내가 필요한 것입니다. 그것은 지금 매력처럼 작동합니다. – MostOner

방금 질문이 하나 더 있습니다. 간격을 두 번 실행하면됩니다. 왜 그런가? 그들은 모두 2 초에 작동하지만 버튼을 누르면 다음 이미지를로드하는 데 4 초가 소요되고 2 초 후에 다시로드됩니다. – MostOner

'swapImage' 루프에서 이미지를 변경 한 후에 만'i'를 업데이트하고 있습니다. 그래서'buttonClicked'를 호출 한 후 다음 스왑은 아무것도 변경하지 않습니다. 나는 그 생각을하지는 않았지만 실제로는 사용자가 클릭 한 후 배너를 2 초 미만으로 표시하는 것보다 더 사용자 친화적이라고 생각합니다 :-) – Bergi

배열에서 이미지를 선택하고 계속하십시오.

답변

관련 문제