Простой слайд изображений JavaScript без предварительного массива

Question

Я довольно новичок в JS. Я создал html-страницу и хочу включить слайдер изображения. он должен быть автоматическим. Я сделал некоторое кодирование, и когда я проверяю консоль, ее запуск, но изображение меняется. , и когда я получаю этот элемент с помощью «getElementById()», он говорит: «sld» имеет значение null, (строка7), то есть «sld.src = eval (« img »+ step +». Src »)» является нулевым, они говорят , Где я делаю это неправильно.

JS - HTML

<script type="text/javascript"> 
     var img1 = new Image(); 
     img1.src="slide_show/1.jpg"; 
     var img2 = new Image(); 
     img1.src="slide_show/2.jpg"; 
     var img3 = new Image(); 
     img1.src="slide_show/3.jpg"; 
     var img4 = new Image(); 
     img1.src="slide_show/4.jpg"; 

    </script> 

JS

var step = 2; 
function slideit() 
{ 
    console.log("i'm called"); 
    console.log(step); 
    var sld = document.getElementsByName("sli"); 
    sld.src = eval("img" + step + ".src"); 
    if (step < 3) { 
     console.log("for loop"); 
     step++; 
    } 
    else{ 
     step = 1; 
    } 
    console.log("timeout"); 
    setTimeout("slideit()", 250); 
} 

HTML

<div id="main_section"> 
<img name="sli" src="slideShow/1.1.jpg" id="slide_show"/> 
</div> 

Answer 1

Есть несколько исправлений, необходимых в вашем коде

• Нет необходимости создавать массив изображения, и вы можете просто хранить значения в простом массиве строк.
• Не нужно использовать document.getElementsByName, но вместо этого вы можете использовать document.getElementById. Передайте идентификатор тега изображения.
• Обратите внимание, что вам также необходимо изменить вызов setTimeout.

Исправленный код будет выглядеть так

var img = ["slide_show/1.jpg", "slide_show/2.jpg", "slide_show/3.jpg", "slide_show/4.jpg"]; 

Меняйте JS для

var step = 2; 
function slideit() 
{ 
    console.log("i'm called"); 
    console.log(step); 
    var sld = document.getElementsById("sli"); 
    sld.src = img[step]; 
    if (step < 3) { 
     console.log("for loop"); 
     step++; 
    } 
    else{ 
     step = 1; 
    } 
    console.log("timeout"); 
    setTimeout(slideit, 250); 
}