轮播图原生Js

最新推荐文章于 2024-08-15 08:55:57 发布

沈北漂

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量47

点赞数

分类专栏：学习记录文章标签： javascript

本文链接：https://blog.csdn.net/qq_52046856/article/details/127522152

版权

学习记录专栏收录该内容

28 篇文章 0 订阅

订阅专栏

轮播图总结

html 和 css ：图片容器和按钮需要注意子绝父相

命名要规范，由于命名出了很多bug，找不到

一边写html一边写样式，边写边调

js：逻辑思路要清晰，一步接一步

事件：自动切图和手动切图（按钮和圆点）

第一张和最后一张需要跳转

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值

这是HTML部分代码，其余的css和js部分可以在我的Github上看。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 图片框架 -->
    <div class="box">
        <!-- 图片 -->
        <div class="imgs">
            <ul class="imgbox">
            <li class="imgshow"><img src="./image/first.png" alt=""></li>
            <li class="imgshow"><img src="./image/second.png" alt=""></li>
            <li class="imgshow"><img src="./image/third.png" alt=""></li>
            <li class="imgshow"><img src="./image/fourth.jpg" alt=""></li>
            </ul>
        </div>

        <!-- 按钮 -->
        <div class="pre"></div>
        <div class="next"></div>
   
        <!-- 小圆点 -->
        <div class="yuandian">
            <ul>
                <li class="act"><a href="#"></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </div>

    </div>
    
</body>
<script src="script.js"></script>
</html>