2021-06-22

巷陌540

于 2021-06-22 20:26:32 发布

阅读量65

点赞数

文章标签： dom

本文链接：https://blog.csdn.net/WF_devil/article/details/118115806

版权

原生DOM经典案例百度轮播图

自己建一个img文件夹放置图片,看代码规则的修改图片名称,和按钮图片

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 950px;
            height: 500px;
            margin: 0 auto;
            outline: 1px solid black;
        }

        .box::after {
            clear: both;
            display: block;
            content: "";
        }

        .box2 {
            width: 800px;
            height: 500px;
            outline: 1px solid red;
            float: left;
        }

        .box1 {
            width: 75px;
            height: 500px;
            float: left;
            position: relative;

        }

        .box3 {
            width: 75px;
            height: 500px;
            float: left;
            position: relative;

        }

        img {
            width: 800px;
            height: 500px;
        }

        .box1 span {
            position: absolute;
            display: block;
            width: 75px;
            height: 75px;
            font-size: 75px;
            line-height: 75px;
            top: 0;
            bottom: 0;
            margin: auto auto;
            /* outline: 1px solid red; */
            user-select: none;
        }

        .box3 span {
            position: absolute;
            display: block;
            width: 75px;
            height: 75px;
            font-size: 75px;
            line-height: 75px;
            top: 0;
            bottom: 0;
            margin: auto auto;
            /* outline: 1px solid red; */
            user-select: none;
        }

        .box1:hover {
            background-color: rgb(214, 211, 211);
        }

        .box1:hover span {
            color: #fff;
        }

        .box3:hover {
            background-color: rgb(214, 211, 211);
        }

        .box3:hover span {
            color: #fff;
        }

        .main {
            width: 950px;
            margin: 20px auto;
            height: 154px;
            overflow: hidden;
            /* outline: 1px solid red; */
            position: relative;
            transition: all 0.3 linear;
        }

        ul::after {
            clear: both;
            display: block;
            content: "";

        }

        ul {
            width: 2256px;
            /* outline: 1px solid red; */
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.3s linear;
        }

        li {
            list-style: none;
            float: left;
            margin: 0 10px;
            width: 168px;
            height: 150px;
            margin-top: 2px;
        }

        li img {
            width: 168px;
            height: 150px;
            border: none;
            /* vertical-align: top; */
            display: block;
        }

        .out {
            outline: 3px solid red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"><span>&lt;</span></div>
        <div class="box2">
            <img src="./img/0.jpg" alt="">
        </div>
        <div class="box3"><span>&gt;</span></div>
    </div>
    <div class="main">
        <ul>

        </ul>
    </div>

</body>
<script>
    var img = document.querySelector(".box2 img");
    var btn1 = document.querySelector(".box1 span");
    var btn2 = document.querySelector(".box3 span");
    var ul = document.querySelector("ul")
    for (var i = 0; i < 12; i++) {
        var li = document.createElement("li");
        li.innerHTML = `<img src="./img/${i}.jpg">`
        ul.appendChild(li)
    }
    var lis = document.querySelectorAll("li");
    lis[0].classList.add("out")

    var imgs = document.querySelectorAll(".main img");
    imgs = Array.from(imgs);

    var istrue = false;
    if (istrue == false) {
        anliu()
    }


    imgs.forEach(function (item, index) {
        item.onclick = function () {
            istrue = true;
            del()
            add(index)
            if (index >= 3 && index <= 9) {
                ul.style.left = -(index - 2) * 188 + "px"
                console.log(index)
            } else if (index < 3) {
                ul.style.left = 0 + "px"
            }
            var int = index;
            btn1.onclick = function () {
                int--;
                int = int <= 0 ? 0 : int;
                del()
                add(int);
                if (int >= 3 && int < 9) {
                    ul.style.left = -(int - 2) * 188 + "px"
                    console.log(int)
                } else if (int < 3) {
                    ul.style.left = 0 + "px"
                }
            }

            btn2.onclick = function () {
                int++;
                int = int >= 11 ? 11 : int;
                del()
                add(int);
                if (int >= 3 && int < 10) {
                    ul.style.left = -(int - 2) * 188 + "px"
                    console.log(int)
                } else if (int > 10) {
                    ul.style.left = -7 * 188 + "px"
                }
            }
            console.log(index)
        };
    })



    function anliu() {
        var count1 = 0;
        var count = 0;
        btn1.addEventListener("click", function () {
            // btn1.onclick = function () {
            count--;
            count = count <= 0 ? 0 : count;
            del()
            if (count >= 2 && count < 9) {
                count1++;
                ul.style.left = count1 * 188 + "px"
                console.log(count1)
            } else if (count < 2) {
                ul.style.left = count1 * 188 + "px"
            }

            add(count)
        })
        btn2.addEventListener("click", function () {
            // btn2.onclick = function () {
            count++;
            count = count >= 11 ? 11 : count;
            del()
            if (count > 2 && count < 10) {
                count1--;
                ul.style.left = count1 * 188 + "px"
                console.log(count1)
            } else if (count >= 10) {
                ul.style.left = count1 * 188 + "px"
            }
            add(count)
        })
    }





    function del() {
        for (var i = 0; i < lis.length; i++) {
            lis[i].classList.remove("out")
        }
    }
    function add(cou) {
        lis[cou].classList.add("out")
        img.src = `./img/${cou}.jpg`
    }
</script>

</html>

巷陌540

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-22

原生DOM经典案例百度轮播图自己见一个img文件夹放置图片,看代码规则的修改图片名称,和按钮图片<!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
复制链接

扫一扫