JavaScript实现简单的图片轮播（通过点击数字切换）

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

lettle_redhat

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

阅读量1.5w

点赞数 10

分类专栏： javascript 文章标签： javascript 图片轮播 html css

本文链接：https://blog.youkuaiyun.com/Makenzie/article/details/77451563

版权

本文介绍如何使用JavaScript实现一个简单的图片轮播功能，用户可以通过点击数字来切换显示的图片。包含关键代码展示。

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

最终实现效果图

这里写图片描述

点击下标切换到该图片上

代码块

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
         <style>
        * {
            margin: 0;
            padding: 0
        }

        ul {
            list-style: none
        }

        img {
            vertical-align: top
        }

        .box {
            width: 490px;
            height: 170px;
            margin: 100px auto;
            padding: 5px;
            border: 1px solid #ccc;
        }

        .inner {
            width: 490px;
            height: 170px;