javascript background image change using array

Question

Я не exprienced программист javascript, поэтому я стараюсь играть с javascript. Я пытаюсь сделать слайд-шоу, нажав на кнопку. Функция Я пытаюсь сделать функцию с массивом, который содержит имена всех изображений и меняет фоновое изображение в соответствии с индексом массива. Я выполнял только эту часть функции, и я не могу понять, что не так.

function change(lol){ 
 
\t var img = ["veni1.jpg", "veni2.jpg", "veni3"]; 
 
    var middle = document.getElementById("vvvmiddle"); 
 
    var index = img.indexOf(middle.style.backgroundImage); 
 
    
 
\t if(change === "right"){ 
 
\t \t var current = index + 1; 
 
\t \t middle.style.backgroundImage = img[current]; 
 
\t } 
 
}

middle { 
 
    width:1262px; 
 
    height:550px; 
 
    background-color: white; 
 
    margin-left: -7px; 
 
} 
 
#vvvmiddle { 
 
    width:700; 
 
    height:400; 
 
    background-image:url('veni1.jpg'); 
 
    margin: 20px 0px 0px 310px; 
 
    float:left; 
 
} 
 
#sipka { 
 
    width:40; 
 
    height:40; 
 
    border-radius: 100px; 
 
    background-color: #DCDCDC; 
 
    float:right; 
 
    margin: 450px 410px 0px 0px; 
 
} 
 
#sipkatext { 
 
    font-family: Impact; 
 
    color: white; 
 
    font-size: 30px; 
 
    padding-left: 10px; 
 
    padding-top: 1px; 
 
} 
 
#sipkaurl { 
 
    text-decoration: none; 
 
} 
 
#sipka:hover { 
 
    background-color: #3399FF; 
 
} 
 
#sipka2:hover { 
 
    background-color: #3399FF; 
 
} 
 
#sipka2 { 
 
    width:40; 
 
    height:40; 
 
    border-radius: 100px; 
 
    background-color: #DCDCDC; 
 
    float:right; 
 
    margin: 450px -100px 0px 0px; 
 
} 
 
#sipkatext2 { 
 
    font-family: Impact; 
 
    color: white; 
 
    font-size: 30px; 
 
    padding-left: 13px; 
 
    padding-top: 1px; 
 
}

<div id="middle"> 
 
    <div id="vvvmiddle"> 
 
     <div id="sipka" onclick="change('left')"> 
 
      <div id="sipkatext"> 
 
       <</div> 
 
      </div> 
 
      <div id="sipka2" onclick="change('right')"> 
 
       <div id="sipkatext2">></div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 1

Возможное решение может быть это один:

var img = ["img1.png", "img2.png", "img3.png"]; 
var len = img.length; 
var url = 'Some url...'; 
var current=0; 

var middle = document.getElementById("vvvmiddle"); 
middle.style.backgroundImage = "url(" + url + img[current] + ")"; 

function change(dir){ 
    if(dir == "right" && current < len-1){ 
     current++; 
     middle.style.backgroundImage = "url(" + url + img[current] + ")"; 
    } else if(dir == "left" && current > 0){ 
     current--; 
     middle.style.backgroundImage = "url(" + url + img[current] + ")"; 
    } 
} 

в действии, проверьте здесь jsfiddle.

Answer 2

Вы проверяете неправильно переменную в состоянии, она должна быть lol, не change:

if(lol === "right"){ 
    var current = index + 1; 
    middle.style.backgroundImage = img[current]; 
} 

Также вы должны обращаться с «последнее изображение» случай, как говорит Николя.

Answer 3

Вы можете попробовать следующее:

function change(lol) { 
    var img = ["veni1.jpg", "veni2.jpg", "veni3"]; 
    var middle = document.getElementById("vvvmiddle"); 
    var index = img.indexOf(middle.style.backgroundImage); 

    if(lol === "right"){ 
     index = (index + 1) % img.length; 
    } else { 
     index = (index + img.length - 1) % img.length; 
    } 
    middle.style.backgroundImage = img[index]; 
}