DOM-轮播图

莫奈的日出

已于 2022-05-22 15:33:57 修改

阅读量185

点赞数

文章标签：前端 javascript css3

于 2022-05-17 17:06:56 首次发布

本文链接：https://blog.csdn.net/weixin_52993364/article/details/124824944

版权

DOM：document、object、model 文档对象模型

功能：实现自动轮播，圆点切换，左右箭头切换

一、使用背景图作为图片实现简单轮播

代码：

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

    <style>

        * {

            margin: 0;

            padding: 0;

            list-style: none;

        }



        .wrap {

            width: 500px;

            height: 320px;

            margin: 100px auto;

            position: relative;

            background-color: pink;

            background-size: cover;

            background-position: center center;

        }



        .arraw {

            width: 30px;

            height: 30px;

            background-color: rgba(0, 0, 0, .7);

            color: #fff;

            line-height: 30px;

            text-align: center;

            position: absolute;

            top: 160px;

            border-radius: 50%;

        }



        .prew {

            left: 10px;

        }



        .next {

            right: 10px;

        }



        .dots {

            position: absolute;

            width: 160px;

            height: 20px;

            background-color: rgba(0, 0, 0, .7);

            bottom: 10px;

            left: 170px;

            display: flex;

            justify-content: space-around;

            align-items: center;

            border-radius: 10px;

        }



        .dots .dot {

            width: 10px;

            height: 10px;

            background-color: rgba(255, 255, 255, .7);

            border-radius: 50%;

        }



        .dots .now {

            background-color: #fff;

        }

    </style>

</head>



<body>

    <div class="wrap">

        <div class="arraw prew">

            < </div>

                <div class="arraw next"> > </div>

                <div class="dots">

                    <div class="dot now"></di