Слайд-шоу при нажатии клавиш не работает должным образом

Question

Итак, у меня есть этот код. Я делаю что-то не так. Я хочу, чтобы стрелка влево вернулась (показать предыдущее изображение), но она не работает. Это показывает следующее изображение (как стрелка вправо). Независимо от стрелки, которую я нажимаю, влево или вправо, это показывает следующее изображение. Я пробовал миллионы разных вещей, и я не могу найти проблему. Может кто-нибудь мне помочь?

Мне также нравятся источники для цикла. Когда будет достигнут последний источник из массива, я хочу снова вернуться к первому источнику (и к последнему источнику при достижении первого).

Кстати, у меня также есть код для изменения изображения при нажатии. Я почти уверен, что это не имеет никакого отношения к проблеме, но я решил оставить это на всякий случай, если это что-то испортит.
Спасибо:)

---

HTML:

<div class="container">
    <div id="slideshow"> 
        <img alt="slideshow" src="1.jpg" id="imgClickAndChange" onclick="changeImage()"/> 
    </div>
</div>

JS:

<script>
    var imgs = ["2.jpg", "3.jpg", "4.jpg", "5.jpg"];

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

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

<script language="javascript">
    var imgs = ["2.jpg", "3.jpg", "4.jpg", "5.jpg"];
    function changeImage() {
        document.getElementById("imgClickAndChange").src = imgs[0];
        imgs.push(imgs.shift())
    }
</script>

Answer 1

Вы были на правильном пути, но ошиблись в нескольких вещах:

• У вас есть две переменные с одинаковым именем.
• У вас есть две функции с одинаковым именем.
• Если функция ожидает аргумент, вы всегда должны отправить аргумент (или null), вы можете не только отправить -1 для левого, и ничего для правого. (И в вашем случае вы фактически усложняете для себя, не посылая 1 за право).
• || imgs[dir ? imgs.length - 1 : 0] не делает то, что вы думаете, что делает. Вы проверяете dir как будто это логическое значение. JavaScript может интерпретировать 1 а также -1 как логическое (true а также false соответственно), а потому что вы только отправляете -1 это не будет работать правильно.

Ниже приведен код исправления этих проблем:

---

JS, HTML:

var imgs = ["https://stackru.com/images/2158a577cfd2c1eb66694451648d7c3118bc09ff.jpg",
            "https://stackru.com/images/3315b1327866bbdc5e9b4a88fa21aaf5c285ca02.gif",
            "https://stackru.com/images/b8f8a3267773be69aa5111990670c826656dc7ca.png",
            "https://stackru.com/images/f7fddc72f4ab670bf6f2996c437c876351eaa225.jpg",
            "https://stackru.com/images/da6c15c463700ff4d231fdc09feed75b9b316f8f.png"];

document.onkeydown = function(event) {
  var e = event || window.event;
  if (e.keyCode == '37') { //LEFT
    changeImage(-1);
  } else if (e.keyCode == '39') { //RIGHT
    changeImage(1);
  }
}

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

#imgClickAndChange {
  width: 150px;
  height: 150px;
}

<div class="container">
  <div id="slideshow"> 
    <img id="imgClickAndChange" src="https://stackru.com/images/2158a577cfd2c1eb66694451648d7c3118bc09ff.jpg" alt="" onclick="changeImage(1)" /> 
  </div>
</div>

(скрипка: http://jsfiddle.net/k3wxhc58/8/)

• В троичном операторе вместо (dir==1) Вы могли бы просто использовать dir, так как JavaScript переводит 1 в true, Но используя (dir==1) безопаснее, потому что это создаст настоящий логический тип.
• Я заменил изображения в imgs - массив со ссылками на изображения, которые реально существуют, чтобы скрипт работал без ошибок.
• Я добавил немного CSS, это только ради ответа, чтобы все изображения имели одинаковый размер.

---

Если вы не хотите, чтобы изображения зацикливались, измените changeImage() функция к этому:

function changeImage(dir) {
    var img = document.getElementById("imgClickAndChange");
    var newSrc = imgs[imgs.indexOf(img.src)+dir];

    if (imgs.indexOf(newSrc) != -1) { //only sets new src if it's in the imgs-array (i.e. if it exists)
        img.src = newSrc;
    }
}

(скрипка: http://jsfiddle.net/k3wxhc58/9/)