JavaScript 实现图片列表左右滑动 - 完整代码示例

使用 JavaScript 实现图片列表左右滑动功能

本文将介绍如何使用 JavaScript 代码实现图片列表的左右滑动功能，并提供完整的代码示例。

步骤 1：HTML 结构

首先，我们需要在 HTML 中创建图片列表结构，并添加必要的 ID 和 class 属性：

<ul id='image_list'>
  <li><img src='img/a01.png' alt=''></li>
  <li><img src='img/a02.png' alt=''></li>
  <li><img src='img/a03.png' alt=''></li>
  <li><img src='img/a04.png' alt=''></li>
  <li><img src='img/a05.png' alt=''></li>
  <li><img src='img/a06.png' alt=''></li>
  <li><img src='img/a07.png' alt=''></li>
  <li><img src='img/a08.png' alt=''></li>
  <li><img src='img/a09.png' alt=''></li>
  <li><img src='img/a10.png' alt=''></li>
  <li><img src='img/a11.png' alt=''></li>
  <li><img src='img/a12.png' alt=''></li>
</ul>

<button class='prev'>Previous</button>
<button class='next'>Next</button>

步骤 2：JavaScript 代码

接下来，我们需要编写 JavaScript 代码来处理按钮点击事件并实现滑动功能：

var imageList = document.getElementById('image_list');
var prevButton = document.querySelector('.prev');
var nextButton = document.querySelector('.next');
var currentIndex = 0;

prevButton.addEventListener('click', function() {
  if (currentIndex > 0) {
    currentIndex -= 4;
    imageList.style.transform = 'translateX(-' + currentIndex * 100 + '%)';
    nextButton.disabled = false;
  }
  if (currentIndex <= 0) {
    prevButton.disabled = true;
  }
});

nextButton.addEventListener('click', function() {
  if (currentIndex < imageList.children.length - 4) {
    currentIndex += 4;
    imageList.style.transform = 'translateX(-' + currentIndex * 100 + '%)';
    prevButton.disabled = false;
  }
  if (currentIndex >= imageList.children.length - 4) {
    nextButton.disabled = true;
  }
});

代码说明：

1. 使用 document.getElementById() 和 document.querySelector() 选择 HTML 元素。
2. 使用 addEventListener() 为按钮添加点击事件监听器。
3. 通过 currentIndex 变量跟踪当前显示的图片位置。
4. 在点击按钮时更新 currentIndex 并使用 style.transform 属性改变图片列表的显示位置。
5. 使用 disabled 属性控制按钮是否可点击。

常见错误：

如果出现 prevButton.addEventListener('click', function() { 这一行代码报错，可能是因为 prevButton 变量没有被正确定义。请检查以下几点：

1. 确保 HTML 中存在具有 class='prev' 的按钮元素。
2. 确保 JavaScript 代码中的 prevButton 选择器正确无误。

总结：

通过以上步骤，您可以使用 JavaScript 代码实现图片列表左右滑动功能。请根据您的具体需求调整代码和 HTML 结构。

站长合作邮箱：wxgpt@qq.com