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>

有任何想法嗎？我不想使用 Bootstrap。

謝謝！

uj5u.com熱心網友回復：

看起來您正在使用 vanilla javascript，直到最后一個事件偵聽器。看起來像jquery。

像你上面做的那樣，讓它成為香草 js。它作業正常。

保持控制臺工具打開可以讓您很好地了解問題所在。

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

標籤：javascript html css

上一篇：具有固定寬度子項忽略寬度的Flexbox

下一篇：為什么我的Bootstrap下拉選單沒有顯示？