爲什麼這個HTML/JavaScript幻燈片不會改變其所有圖像？

我正在寫一個小畫廊/幻燈片頁面，該頁面應該通過使用向左或向右箭頭鍵的圖像進行更改。目前，代碼有點作用，但不會通過其所有圖像進行更改。爲什麼是這樣？它如何被修復？爲什麼這個HTML/JavaScript幻燈片不會改變其所有圖像？

圖片樣品測試：

[ 
    'http://i.imgur.com/co6MlSo.jpg', 
    'http://i.imgur.com/gCxcOKi.jpg', 
    'http://i.imgur.com/lsu7ZSw.jpg', 
    'http://i.imgur.com/pwysNhX.jpg' 
];

代碼：

<html> 
<head> 
<title>gallery</title> 
<style type="text/css"> 
    html, body{ 
     background: #333333; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     font-family: Arial Black; 
     font-size: 18px; 
     line-height: 1.5; 
     text-align: justify; 
    } 
    img{ 
     padding: 0; 
     display: block; 
     margin: 0 auto; 
     max-height: 100%; 
     max-width: 100%; 
    } 
</style> 
</head> 
<body> 
<div class="container"> 
    <div id="slideshow"> 
     <img 
      alt="slideshow" 
      src="co6MlSo.jpg" 
      id="imgClickAndChange" 
      onclick="changeImage()" 
     /> 
    </div> 
</div> 
<script> 
    var images = [ 
     "co6MlSo.jpg", 
     "gCxcOKi.jpg", 
     "lsu7ZSw.jpg", 
     "pwysNhX.jpg" 
    ]; 

    function changeImage(dir){ 
     var img = document.getElementById("imgClickAndChange"); 
     img.src = images[images.indexOf(img.src) + (dir || 1)] || images[dir ? images.length - 1 : 0]; 
    } 

    document.onkeydown = function(e){ 
     e = e || window.event; 
     if (e.keyCode == '37'){ 
      changeImage(-1) // left to display previous image 
     }else if (e.keyCode == '39'){ 
      // right to display next image 
      changeImage() 
     } 
    } 
</script> 
</body> 
</html>

來源

2016-12-17 d3pd

我會在點擊使用jQuery，而不是行內的onclick。當我小提琴時，我得到錯誤，checkImage沒有定義由於無參數調用。如果你使用jQuery，你可以使用條件邏輯。 – yardpenalty

你可以添加類似條件：

if(dir=='next'){ 
    index++; 
}else{ 
    index--; 
} 

if(index>images_length){ 
    index=0; 
}else if(index<0){ 
    index=images_length; 
} 

img.src = images[index];

希望這有助於。

var images = ["http://i.imgur.com/co6MlSo.jpg","http://i.imgur.com/gCxcOKi.jpg","http://i.imgur.com/lsu7ZSw.jpg","http://i.imgur.com/pwysNhX.jpg"]; 
 
var index = 0; 
 
var images_length = images.length-1; 
 

 
function changeImage(dir){ 
 
    var img = document.getElementById("imgClickAndChange"); 
 

 
    if(dir=='next'){ 
 
    index++; 
 
    }else{ 
 
    index--; 
 
    } 
 

 
    if(index>images_length){ 
 
    index=0; 
 
    }else if(index<0){ 
 
    index=images_length; 
 
    } 
 

 
    img.src = images[index]; 
 
} 
 

 
document.onkeydown = function(e){ 
 
    e = e || window.event; 
 

 
    if (e.keyCode == '37'){ 
 
    changeImage('prev'); 
 
    }else if (e.keyCode == '39'){ 
 
    changeImage('next'); 
 
    } 
 
}

html, body{ 
 
    background: #333333; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: Arial Black; 
 
    font-size: 18px; 
 
    line-height: 1.5; 
 
    text-align: justify; 
 
} 
 
img{ 
 
    padding: 0; 
 
    display: block; 
 
    margin: 0 auto; 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
}

<div class="container"> 
 
    <div id="slideshow"> 
 
    <img 
 
     alt="slideshow" 
 
     src="http://i.imgur.com/co6MlSo.jpg" 
 
     id="imgClickAndChange" 
 
     onclick="changeImage()" 
 
     /> 
 
    </div> 
 
</div>

來源

2016-12-17 12:37:51

爲什麼這個HTML/JavaScript幻燈片不會改變其所有圖像？

回答

相關問題