Изменение JavaScript img src

Question

Я пытаюсь сделать слайдер изображения только с помощью JavaScript. У меня есть кнопка с идентификатором в HTML и вы хотите изменить 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']; 

Кроме того, вам нужно использовать document.getElementById и установить в качестве getElementById по себе будет относиться к window, а не document.

И, наконец, вам необходимо установить переменную 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>