轮播图...

最新推荐文章于 2024-07-25 15:44:34 发布

shixuerong

最新推荐文章于 2024-07-25 15:44:34 发布

阅读量41

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/shixuerong/article/details/126315150

版权

<!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>
        #img {
            width: 500px;
            height: 400px;
            margin: 100px auto;
            position: relative;
            background-size: 500px 400px;
            transition: 1s all linear;
        }

        #right {
            width: 30px;
            height: 60px;
            position: absolute;
            top: 180px;
        }

        #left {
            width: 30px;
            height: 60px;
            position: absolute;
            top: 180px;
            left: 470px;
        }

        ul {
            display: flex;
            position: absolute;
            top: 300px;
            left: 150px;

        }

        li {
            list-style: none;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: black;
            margin-left: 10px;
            background-image: url(../img/);

        }
    </style>
</head>

<body>
    <div id="img">
        <input type="button" value="<" id="right">
        <input type="button" value=">" id="left">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>
<script src="./轮播图带定时器.js"></script>
<script>
    let oImg = document.getElementById("img")
    let oRight = document.getElementById("right")
    let oLeft = document.getElementById("left")
    let oLi = document.getElementsByTagName("li")

    let a = new lunbo(oImg, oRight, oLeft, oLi)
</script>

class lunbo {
    constructor(img, right, left, li) {
        this.oImg = img;
        this.oRight = right;
        this.oLeft = left;
        this.oLi = li;
        this.index = 0;
        this.time=0;
        this.oImg.style.backgroundImage =`url(../img/${this.index}.jpg)`;
        this.oLi[this.index].style.backgroundColor = 'red';
        this.eventBind();

    }
    ipdate() {
        this.oImg.style.backgroundImage = `url(../img/${this.index}.jpg)`;
        for (let i = 0; i < this.oLi.length; i++) {
            if (i == this.index) {
                this.oLi[i].style.backgroundColor = 'red';
            } else {
                this.oLi[i].style.backgroundColor = 'black';
            }
        }
    }
    next() {
        this.index++;
        if (this.index == this.oLi.length) {
            this.index = 0;
        }
        this.ipdate();
    }

    prev() {
        this.index--;
        if (this.index == -1) {
            this.index = this.oLi.length - 1;
        }
        this.ipdate();

    }

    click() {
        let that = this
        for (let i = 0; i < this.oLi.length; i++) {
            this.oLi[i].onclick = function () {
                that.index = i;
                that.ipdate();

            }
        }
    }
    otime() {
        let that = this;
        clearInterval(this.time);
        this.time = setInterval(function () {
         that.next();
         that.click()  
        }, 1000)
    }

    stop() {
        clearInterval(this.time)
    }
    
    eventBind() {
        let that = this;
        this.oLeft.onclick = function () {
            that.next();
        }
        this.oRight.onclick = function () {
            that.prev();
        }
        this.click()
        this.otime()

        this.oImg.onmouseover = function () {
            that.stop()
        }

        this.oImg.onmouseout = function () {
            that.otime()
        }
    }
}