dom版本的轮播图

最新推荐文章于 2024-10-10 19:30:00 发布

等儿

最新推荐文章于 2024-10-10 19:30:00 发布

阅读量354

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_44736637/article/details/122265515

版权

本文详细介绍了如何利用纯CSS3和HTML来创建一个动态的DOM版本轮播图，通过变换、过渡和定位等技术实现图片的平滑切换效果，无需额外的JavaScript库。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 600px;
            border: 1px solid;
            margin: auto;
            position: relative;
            font-size: 0;
        }

        li {
            list-style: none;
        }

        ul,
        ol {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            position: absolute;
        }

        ul {

            justify-content: space-between;
            padding: 0 20px;
            top: calc(50% - 25px);
        }

        ul>li {
            width: 49px;
            height: 49px;
            background: url("../img/shutter_prevBtn.png");
        }

        ul>li:hover {
            background-position: 0 -49px;
        }

        ul>li:nth-child(2) {
            transform: rotate(180deg);
        }

        ol {
            top: 90%;
            justify-content: center;

        }

        ol>li {
            width: 15px;
            height: 15px;
            background-color: rgba(255, 255, 255, .4);
            border-radius: 50%;
            margin-left: 10px;
        }

        ol>li:hover {
            background-color: #fff;
        }

        ol>li:first-child {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="../img/下载 (1).jfif" alt="">
        <ul>
            <li></li>
            <li></li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script>
        const img = document.querySelector(".container>img");
        const container = document.querySelector(".container"); // div
        const next_btn = document.querySelectorAll("ul>li")[1]; // 右键
        const pre_btn = document.querySelectorAll("ul>li")[0]; // 左键
        const lis = document.querySelectorAll("ol>li"); // 所有 li

        const arr = ['下载 (1).jfif', '下载 (2).jfif', '下载 (3).jfif', '下载.jfif'];

        let i = 0, timer = null;

        function render() {
            i++;
            if (i > arr.length - 1) {
                i = 0;
            }
            img.src = `../img/${arr[i]}`;
            for (let item of lis) {
                item.style.backgroundColor = '#fff';
            }
            lis[i].style.backgroundColor = 'red';
        }
        function reverse() {
            i--;
            if (i < 0) {
                i = arr.length - 1;
            }
            img.src = `../img/${arr[i]}`;
        }

        timer = setInterval(render, 1000);

        // 移入停止
        container.onmouseenter = function () {
            clearInterval(timer);
        }
        container.onmouseleave = function () {
            timer = setInterval(render, 1000);
        }
        // 右翻
        next_btn.onclick = function () {
            render();
        }
        // 左翻
        pre_btn.onclick = function () {
            reverse();
        }
        // 圆点点击
        for (let index in lis) {
            lis[index].onclick = function () {
                console.log(index);
                i = index-1;
                render();
            }
        }



    </script>
</body>

</html>