📌  相关文章
📜  如何使用 JavaScript 创建上一个和下一个按钮并且在结束位置上不起作用？(1)

📅  最后修改于: 2023-12-03 15:38:02.155000             🧑  作者: Mango

使用 JavaScript 创建上一个和下一个按钮并且在结束位置上不起作用？

在开发 web 应用程序时，我们经常需要在页面中添加上一个和下一个按钮。这两个按钮通常用于浏览大量数据（如新闻，图片等）。

在本文中，我们将介绍如何使用 JavaScript 创建上一个和下一个按钮，并且在结束位置上不起作用。

创建 HTML 页面

首先，我们需要创建一个 HTML 页面，并向其添加两个按钮：上一个和下一个。

<button id="prevBtn">上一个</button>
<button id="nextBtn">下一个</button>

<div id="imgContainer">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
  <img src="image4.jpg" alt="image4">
  <img src="image5.jpg" alt="image5">
</div>

在这个示例中，我们向一个名为“imgContainer”的 div 元素中添加了五个图像元素。我们将使用上一个和下一个按钮来浏览这些图像。

JavaScript 代码

现在，我们需要编写 JavaScript 代码来使这些按钮正常工作。我们将首先写一个变量，用于存储当前图像的索引。我们将使用这个索引来更新图像。

var currentImg = 0;

接下来，我们需要为上一个和下一个按钮添加事件监听器。在这里，我们将使用 addEventListener() 函数来添加这些事件监听器。

document.getElementById("prevBtn").addEventListener("click", function(){
  if(currentImg != 0){
    currentImg--;
    document.getElementById("imgContainer").innerHTML = '<img src="image'+(currentImg+1)+'.jpg" alt="image'+(currentImg+1)+'">';
  }
});

document.getElementById("nextBtn").addEventListener("click", function(){
  if(currentImg != 4){
    currentImg++;
    document.getElementById("imgContainer").innerHTML = '<img src="image'+(currentImg+1)+'.jpg" alt="image'+(currentImg+1)+'">';
  }
});

在这里，我们编写了两个函数：一个用于上一个按钮，另一个用于下一个按钮。在这些函数中，我们检查当前图像的索引，如果当前图像不是第一个或最后一个图像，则将图像索引增加或减少并更新图像。

最后，我们将使用 innerHTML 属性来更新图像。

完整代码
<body>
  <button id="prevBtn">上一个</button>
  <button id="nextBtn">下一个</button>

  <div id="imgContainer">
    <img src="image1.jpg" alt="image1">
    <img src="image2.jpg" alt="image2">
    <img src="image3.jpg" alt="image3">
    <img src="image4.jpg" alt="image4">
    <img src="image5.jpg" alt="image5">
  </div>

  <script>
    var currentImg = 0;

    document.getElementById("prevBtn").addEventListener("click", function(){
      if(currentImg != 0){
        currentImg--;
        document.getElementById("imgContainer").innerHTML = '<img src="image'+(currentImg+1)+'.jpg" alt="image'+(currentImg+1)+'">';
      }
    });

    document.getElementById("nextBtn").addEventListener("click", function(){
      if(currentImg != 4){
        currentImg++;
        document.getElementById("imgContainer").innerHTML = '<img src="image'+(currentImg+1)+'.jpg" alt="image'+(currentImg+1)+'">';
      }
    });
  </script>
</body>
总结

在本文中，我们介绍了如何使用 JavaScript 创建上一个和下一个按钮，并在结束位置上不起作用的方法。这种方法可用于任何 web 应用程序，使用户可以轻松浏览大量数据。