DOM案例（轮播图、手风琴、留言板）

刘大溜达

已于 2022-05-19 08:58:29 修改

阅读量184

点赞数

文章标签： css html 前端

于 2022-05-18 20:58:25 首次发布

本文链接：https://blog.csdn.net/LYM0411/article/details/124847791

版权

这篇博客通过DOM操作实现了前端常见的三个功能：动态轮播图展示，交互式手风琴效果以及一个简单的留言板功能。轮播图实现了图片自动切换，手风琴效果使得内容可以展开和收起，留言板则展示了用户交互的基本元素。通过这些实例，读者可以深入理解DOM在实际项目中的应用。

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

一、轮播图

效果

轮播图

<!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="../轮播图/fonts/font_3401784_vyb1hiurpq/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .container{
            width: 400px;
            height: 300px;
            position: relative;
            margin: 0 auto;
            overflow: hidden;
        }
        .swiper{
            width: 2400px;
            height: 300px;
            position: absolute;
            left: -400px;
        }
     
        .swiper img{
            width: 400px;
            height: 300px;
            float: left;
        }
        .but{
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 20px;
            background-color: rgba(255, 255, 255, .5);
            position: absolute;
            top: 135px;
            
        }
        #prev{
            left: 10px;
        }
        #next{
            right: 10px;
        }
        .dots{
            width: 400px;
            height: 30px;
            /* background-color: pink; */
            position:absolute;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .dot{
            width: 10px;
            height: 10px;
            background-color: white;
            border-radius: 50%;
            margin: 0 15px;
        }
        .dot:hover{
            cursor: pointer;
        }
        .checked{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 图片 -->
        <div class="swiper">
            <img src="img/xzq(1).png" alt="">
            <img src="img/wjk.webp" alt="">
            <img src="img/wy.webp" alt="">
            <img src="img/yyqx.webp" alt="">
            <img src="img/xzq(1).png" alt="">
            <img src="img/wjk.webp" alt="">
        </div>
        <!-- 按钮 -->
        <div id=