教你用JavaScript制作轮播图

最新推荐文章于 2025-05-28 10:56:51 发布

小院里的霍大侠

最新推荐文章于 2025-05-28 10:56:51 发布

阅读量2.9k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Web编程入门文章标签： javascript 前端开发语言经验分享

本文链接：https://blog.csdn.net/xFeater/article/details/128220946

Web编程入门专栏收录该内容

24 篇文章

订阅专栏

本文通过一个实战案例，教你如何用JavaScript制作一个轮播图。图片每3秒自动切换，支持点击左右键手动轮播。讲解了clearTimeout方法和object.style.transform的应用，以及源码解析和学习总结。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

案例介绍

欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！
我们来用JavaScript编程实战案例，做一个轮播图。图片每3秒自动轮换，也可以点击左右按键轮播图片，当图片到达最左端或最右端时，再点击左右键图片弹回最初始的图片或最末尾的图片。通过实战我们将学会clearTimeout方法、object.style.transform方法。

案例演示

图片每隔3秒会自动轮播，用户也可以点击左右键轮播图片。
在这里插入图片描述

案例设计

我们来看此案例的思维导图设计，包括需求描述，页面设计和技术架构。
其中架构设计包含了HTML，CSS，JavaScript 共三部分代码。
在这里插入图片描述

源码学习

进入核心代码学习，我们先来看HTML中的核心代码。

<!-- 有个小院-兴趣编程 -->
<div class="slider-container">
  <div class="image-container">
    <img src="https://picsum.photos/id/237/500/300" alt="image" />
    <img src="https://picsum.photos/id/1/500/300" alt="image" />
    <img src="https://picsum.photos/id/10/500/300" alt="image" />
    <img src="https://picsum.photos/id/20/500/300" alt="image" />
    <img src="https://picsum.photos/id/200/500/300" alt="image" />
  </div>
  <i class="fas fa-angle-double-left btn prev"></i>
  <i class="fas fa-angle-double-right btn next"></i>
</div>

然后我们来编写核心的JavaScript代码，通过querySelector获取HTML元素的信息；设置初始图片位置；添加下一个按键的点击事件，点击后图片向后更换，并暂停自动轮播；添加前一个按键的点击事件，点击后图片向前更换，并暂停自动轮播；编写自动轮播函数，如果图片到底，就返回初始图片，图片在最开始，仍向前查看则返回最末尾图片，设置图片轮播动画。

//有个小院-兴趣编程
const nextEl=document.querySelector(".next");
const prevEl=document.querySelector(".prev");
const imgsEl=document.querySelectorAll("img");
const imageConatinerEl=document.querySelector(".image-container");
let currentImg=1;
let timeout;
nextEl.addEventListener("click",()=>{
  currentImg++;
  clearTimeout(timeout);
  updateImg();
});
prevEl.addEventListener("click",()=>{
  currentImg--;
  clearTimeout(timeout);
  updateImg();
});
updateImg();
function updateImg() {
  if(currentImg>imgsEl.length){
    currentImg=1;
  }else if(currentImg<1){
    currentImg=imgsEl.length;
  }
  imageConatinerEl.style.transform=`translateX(-${(currentImg-1)*500}px)`;
  timeout=setTimeout(()=>{
    currentImg++;
    updateImg();
  },3000);
}