【JavaScript】一个简单的小案例，关于如何实现轮播图(附完整代码)

首先展示一下实际效果：

老规矩，直接上代码：

这段代码实现了一个简单的轮播图功能。具体功能如下：

1. 自动轮播功能：使用`autoPlay()`函数实现自动切换图片的效果。函数首先检查`isPaused`变量的值，如果为`false`表示没有暂停，则将`currentPosition`减去一个图片的宽度。然后检查是否已经达到了最后一张图片，如果是，则将`currentPosition`重置为0，实现循环播放效果。最后，通过设置轮播图容器的`transform`属性，使用`translateX()`函数来实现图片的平移动画效果。然后使用`setTimeout()`方法来实现定时循环调用`autoPlay()`函数，以实现自动播放的功能。

    // 自动轮播const autoPlay = () => {if (!isPaused) {currentPosition -= slideWidth;if (currentPosition <= -(slideWidth * (slider.children.length - 1))) {currentPosition = 0;}slider.style.transform = `translateX(${currentPosition}px)`;}setTimeout(autoPlay, 2000);};

2.. 鼠标悬停/离开事件功能：通过使用`addEventListener()`方法，为轮播图容器添加了`mouseenter`和`mouseleave`事件监听器。当鼠标进入容器时，将`isPaused`变量设置为`true`，表示暂停自动轮播。当鼠标离开容器时，将`isPaused`变量设置为`false`，表示恢复自动轮播。

    // 鼠标悬停/离开事件监听器sliderContainer.addEventListener('mouseenter', () => {isPaused = true;});sliderContainer.addEventListener('mouseleave', () => {isPaused = false;});

3. 上一页按钮点击事件功能：通过使用`addEventListener()`方法，为上一页按钮添加了`click`事件监听器。当点击按钮时，将`currentPosition`增加一个图片的宽度。然后检查是否已经达到了第一张图片，如果是，则将`currentPosition`设置为最后一张图片的位置，实现循环切换效果。最后，通过设置轮播图容器的`transform`属性，使用`translateX()`函数来实现图片的平移动画效果。

    // 上一页按钮点击事件监听器prevBtn.addEventListener('click', () => {currentPosition += slideWidth;if (currentPosition > 0) {currentPosition = -(slideWidth * (slider.children.length-1));}slider.style.transform = `translateX(${currentPosition}px)`;});

4. 下一页按钮点击事件功能：通过使用`addEventListener()`方法，为下一页按钮添加了`click`事件监听器。当点击按钮时，将`currentPosition`减去一个图片的宽度。然后检查是否已经达到了最后一张图片，如果是，则将`currentPosition`重置为0，实现循环切换效果。最后，通过设置轮播图容器的`transform`属性，使用`translateX()`函数来实现图片的平移动画效果。

    // 下一页按钮点击事件监听器nextBtn.addEventListener('click', () => {currentPosition -= slideWidth;if (currentPosition <= -(slideWidth * (slider.children.length))) {currentPosition = 0;}slider.style.transform = `translateX(${currentPosition}px)`;});

觉得有用的好兄弟们点个赞吧TAT

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！