原生js 实现图片轮播（图片按钮+左右轮播）

最新推荐文章于 2025-05-22 13:28:11 发布

kongziyong

最新推荐文章于 2025-05-22 13:28:11 发布

阅读量1w

点赞数 7

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/kongziL/article/details/89739269

这篇博客介绍了如何用原生JavaScript实现一个图片轮播功能，包括通过按钮和左右箭头进行切换。虽然自动播放功能还有待完善，但基本的点击切换效果已经实现，适合初学者参考。

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

该代码可以实现左右箭头点击切换，按钮点击切换，自动播放方面还需改进
点击切换方面算是实现了效果，自我感觉还需要改进，代码仅供参考

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/class.css">
</head>
<body>
<!-- 图片轮播 -->
<div class="picShow" id="picShow">
    <!-- 内容部分 -->
    <ul class="picUl" id="picUl">
        <li><img src="images/squirrel.jpg" alt=""></li>
        <li><img src="images/squir.jpg" alt=""></li>
        <li><img src="images/watch.jpg" alt=""></li>
        <li><img src="images/shoe.jpg" alt=""></li>
    </ul>
    <!-- 内容部分 end -->

    <!-- 点 -->
    <div class="dots" id="dots">
        <span ><img src="images/squirrel1.jpg" alt=""></span>
        <span> <img src="images/squir2.jpg" alt=""></span>
        <span> <img src="images/watch3.jpg" alt=""></span>
        <span> <img src="images/shoe4.jpg" alt=""></span>
    </div>
    <!-- 点 end -->
    <!--箭头-->
    <div class="arrows" id="arrows">
        <span id="arrows_left" class="arrows_left">&lt;</s