为什么这个 HTML/JavaScript 幻灯片没有改变所有图像？

Question

我正在编写一个小 gallery/slideshow 页面，该页面应使用向左或向右箭头键更改其图像。目前，该代码有些工作，但不会更改其所有图像。为什么是这样？如何修复？

样本测试图片：

[
    '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>

Answer 1

您可以添加如下条件：

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>

为什么这个 HTML/JavaScript 幻灯片没有改变所有图像？

Why is this HTML/JavaScript slideshow not changing through all of its images?

html

javascript

key

slideshow