js实现轮播图（简单滚动轮播)

最新推荐文章于 2025-03-12 13:07:57 发布

学Java的小李

最新推荐文章于 2025-03-12 13:07:57 发布

阅读量3.8k

点赞数 9

分类专栏： js css html

本文链接：https://blog.youkuaiyun.com/qq_40072583/article/details/98208297

版权

本文介绍了使用JavaScript实现轮播图的基本原理，包括一个可视区域显示图片和一个包含所有图片的区域。主要实现自动播放、左右按钮切换和下标圆点切换三种效果。

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

原理：

在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时，b需要移动，移动一个a的宽度，使下一张图片显示，

需要实现一下效果：

1.自动播放

2.左右按钮切换

3.下标圆点切换

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
 <style>
     *{
         margin: 0;
         padding: 0;
         list-style: none;
     }
     .box{
         width: 1000px;
         height: 400px;
         border: 1px solid red;
         position: relative;
         margin: 0 auto;
         overflow: hidden;
     }
     .box .list{
         width: 5000px;
         height: 100%;
         border: 1px solid yellow;
         position: relative;
         transition: left 1.5s linear; /*过度时间，即变化时间为1.5s*/
     }
     .box .list li{
         width: 1000px;
         height: 400px;
         float: left;
     }
     .box .list li img{
        width: 1000px;
         height: 400px;
         float: left;
     }
     .box .btn{
         width: 5