时间戳

首页 > 解决方案 > Javascript - 使用键盘自动管理轮播

javascript - Javascript - 使用键盘自动管理轮播

问题描述

我正在开发一个自动和键盘管理的轮播滑块，但是当我点击键盘上的上一个或后退按钮时它没有响应。它在我单击上一个和下一个按钮时起作用，并自动更改。这是我的 HTML 和 Js 代码：

let currentSlide = 0;
const slides = document.querySelectorAll(".picture")

//carousel
const init = (n) => {
  slides.forEach((picture, index) => {
    picture.style.display = "none"
  })
  slides[n].style.display = "block"
}

//left and right buttons
document.addEventListener("DOMContentLoaded", init(currentSlide))
const next = () => {
  currentSlide >= slides.length - 1 ? currentSlide = 0 : currentSlide++
    init(currentSlide)
}

const prev = () => {
  currentSlide <= 0 ? currentSlide = slides.length - 1 : currentSlide--
    init(currentSlide)
}

document.querySelector(".buttonleft").addEventListener('click', prev)

document.querySelector(".buttonright").addEventListener('click', next)

//each 3 seconds change picture
setInterval(() => {
  next()
}, 3000);

// NAVIGATE WITH KEYS
document.keydown(function(e) {
  if (e.keyCode === 37) {
    // Previous
    $(".buttonleft").click();
    return false;
  }
  if (e.keyCode === 39) {
    // Next
    $(".buttonright").click();
    return false;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carousel-container">
  <!-- next and prev buttons -->
  <div class="navigation">
    <div class="btn buttonleft">
      <img src="assets/img/left.png">
    </div>
    <div class="btn buttonright">
      <img src="assets/img/right.png">
    </div>
    <!-- carousel -->
    <div class="carousel">
      <div class="logo">
        <img src="assets/img/mmlogo.png" alt="Yahoo" class="image">
      </div>
      <div class="picture fade">
        <a href="http://www.yahoo.com" target="_blank">
          <img src="assets/img/image1.png" alt="Cloudy with a Chance of Meatballs" class="image">
        </a>
      </div>
      <div class="picture fade">
        <a href="http://www.google.com" target="_blank">
          <img src="assets/img/image2.png" alt="Cloudy with a Chance of Meatballs" class="image">
        </a>
      </div>
      <div class="picture fade">
        <a href="http://www.youtube.com" target="_blank">
          <img src="assets/img/image3.png" alt="Cloudy with a Chance of Meatballs" class="image">
        </a>
      </div>
      <div class="picture fade">
        <a href="http://www.gmail.com" target="_blank">
          <img src="assets/img/image4.png" alt="Cloudy with a Chance of Meatballs" class="image">
        </a>
      </div>
      <div class="picture fade">
        <a href="http://www.outlook.com" target="_blank">
          <img src="assets/img/image5.png" alt="Cloudy with a Chance of Meatballs" class="image">
        </a>
      </div>
    </div>
  </div>
</div>

有任何想法吗？我不想使用引导程序。

谢谢！

标签： javascripthtmlcss

解决方案

看起来您正在使用香草 javascript，直到最后一个事件侦听器。看起来像jquery。

像上面那样做香草js。它工作正常。

保持控制台工具打开可以让您很好地了解问题所在。

document.addEventListener('keydown', (function(e) {
    if (e.keyCode === 37) {
       // Previous
       console.log("prev");
    }
    if (e.keyCode === 39) {
       // Next
       console.log("next");
    }
}));

推荐阅读