JavaScript 변경 img src

Question

자바 스크립트를 사용하여 이미지 슬라이더를 만들려고합니다. HTML에 id가있는 버튼이 있고 배열의 위치를 ​​기반으로 버튼의 src를 변경하려고합니다. 이것은 다음 코드입니다.

var index = 0; 
var imageArray = [{'images/img1.jpg'},{'images/img2.jpg'},{'images/img3.jpg'},{'images/img4.jpg'}]; 

function moveToNextSlide() 
{ 
    if (index >= imageArray.length -1) 
    { 
     index =-1; 
    } 
    var img = getElementById(img_start); 
    index = index + 1; 
    var currentSlide = imageArray[index]; 
    getElementByid(img_start).src="currentSlide"; 

} 

Answer 1

문자열 배열을 만드는 것처럼 보입니다. 당신은이 :

var imageArray = [{'images/img1.jpg'},{'images/img2.jpg'},{'images/img3.jpg'},{'images/img4.jpg'}]; 

중괄호 ({}가) 객체를 선언하는 데 사용됩니다; 각 문자열 주위에있는 중괄호는 구문 오류입니다. 문자열의 배열에 대해서만 중괄호없이 따옴표 붙은 리터럴을 남기면됩니다.

var imageArray = ['images/img1.jpg','images/img2.jpg','images/img3.jpg','images/img4.jpg']; 

Answer 2

몇 가지 문제가 있습니다. 먼저 올바른 array 구문을 사용해야합니다.

var imageArray = ['images/img1.jpg','images/img2.jpg','images/img3.jpg','images/img4.jpg']; 

또한, 당신은 window 아닌 document을 참조한다 그 자체에 getElementById로 document.getElementById 및 설정을 사용해야합니다.

마지막으로 변수 currentSlide을 img.src= currentSlide;과 같게 설정하고 "currentSlide"을 문자열로 설정해야합니다.

function moveToNextSlide(){ 
    if (index >= imageArray.length -1){ 
     index =-1; 
    } 
    var img = document.getElementById('img_start'); 
    index = index + 1; 
    var currentSlide = imageArray[index]; 
    img.src= currentSlide; 
} 

여기에 전체 예를

var index = 0; 
 
var imageArray = ['http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg', 'http://armpit-wrestling.com/wp-content/uploads/2016/06/bret-hart.jpg']; 
 

 
document.body.onload = function(){ 
 
    document.getElementById('img_start').src = imageArray[0]; 
 
}; 
 

 
function moveToNextSlide() { 
 
    if (index >= imageArray.length - 1) { 
 
    index = -1; 
 
    } 
 
    var img = document.getElementById('img_start'); 
 
    index = index + 1; 
 
    var currentSlide = imageArray[index]; 
 
    img.src = currentSlide; 
 
}

img { 
 
    max-width: 100px; 
 
} 
 

 
p { 
 
    cursor: pointer; 
 
}

<img id="img_start" src=""> 
 
<p onclick="moveToNextSlide()">Click Here</p>