使用數組的javascript背景圖像更改

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