javascript背景图像更改使用数组

Question

I am not exprienced javascript programmer so I try to play with javascript. I am trying to make a slideshow by clicking on a button. Function I am trying to make a function with array that holds the names of all the images and changing the background-image according to the index of the array. I did only this part of function yet and I cant get what is wrong.

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

 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

You are checking wrong variable in condition, it should be lol , not change :

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

Also you should handle "last image" case like Nicolas suggests.

Answer 2

You can try with that:

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];
}

Answer 3

A possible solution may be this one:

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] + ")";
    }
}

See it in action, check here jsfiddle .