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

最新推荐文章于 2024-07-24 21:47:58 发布

kongziyong

最新推荐文章于 2024-07-24 21:47:58 发布

阅读量9.9k

点赞数 7

本文链接：https://blog.csdn.net/kongziL/article/details/89739269

版权

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

摘要由CSDN通过智能技术生成

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

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>
    <!--

最低0.47元/天解锁文章

kongziyong

关注

7
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
原生js 实现图片轮播（图片按钮+左右轮播）

该代码可以实现左右箭头点击切换，按钮点击切换，自动播放方面还需改进点击切换方面算是实现了效果，自我感觉还需要改进，代码仅供参考html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>...
复制链接

扫一扫