轮播图案例

茹嗨瑞

已于 2022-10-17 07:58:41 修改

阅读量88

点赞数

分类专栏： # JavaScript学习笔记文章标签： javascript 前端 html

于 2022-09-13 18:19:46 首次发布

本文链接：https://blog.csdn.net/m0_53181852/article/details/126838885

版权

JavaScript学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

轮播图

在这里插入图片描述

基本功能：

按相应的按钮会切换照片
点击图片上的小圆点会切换到相应的图片
当打开页面的时候图片会直接切换，鼠标移到图片上时自己切换消失

<!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>
        #box {
            width: 300px;
            height: 200px;
            margin: 30px auto;
            position: relative;
            border: 1px solid #333;
        }

        #pre {
            position: absolute;
            top: 50%;
            left: 0;
        }

        #next {
            position: absolute;
            top: 50%;
            right: 0;
        }

        ul {
            position: absolute;
            bottom: 0;
            padding-left: 72px;
        }

        li {
            list-style: none;
            width: 10px;
            height: 10px;
            background: black;
            border-radius: 50%;
            margin: 0 10px;
            float: left;
        }
    </style>
</head>

<body>
    <div id="box">
        <input id="pre" type="button" value="<">
        <input id="next" type="button" value=">">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>
<script src="banner.js"></script>
<script>
    // 获取dom对象
    // 获取整个div节点用来换背景图片
    let oBox = document.getElementById("box");
    // 获取左边的按钮
    let oPre = document.querySelector("#pre");
    // 获取右边的按钮
    let oNext = document.querySelector("#next");
    // 获取所有的li
    let oLis = document.getElementsByTagName("li");

    // 创建对象将所获得的节点传入类中通过类中的方法
    let b = new Banner(oBox,oPre,oNext,oLis);

</script>

// 这个是程序员需要写的，用户只需把数据传进来通过以下代码实现想要的功能
class Banner {
    // oBox,oPre,oNext,oLis
    constructor(oBox, oPre, oNext, oLis) {
        // 将获取的节点
        this.oBox = oBox;
        this.oPre = oPre;
        this.oNext = oNext;
        this.oLis = oLis;
        //添加自定义属性
        this.index = 0;
        // 根据自定义属性的值改变相对应的盒子背景和li改变背景
        this.oBox.style.backgroundImage = `url(img/${this.index}.jpg)`;
        this.oLis[this.index].style.backgroundColor = 'red';
        // 自动调用eventBind函数
        this.eventBind();
    }

    // 改变背景图片和li背景颜色
    setImge() {
        this.oBox.style.backgroundImage = `url(img/${this.index}.jpg)`;

        // 对所有的li进行循环让所指的li变成红色其他都变为黑色
        for (let i = 0; i < this.oLis.length; i++) {
            if (this.index == i) {
                this.oLis[i].style.backgroundColor = 'red';
            } else {
                this.oLis[i].style.backgroundColor = 'black';
            }
        }

    }

    // 当index加时
    pre() {
        // 当点左边的按钮时，index做自减
        this.index--;
        // 进行判断当index==-1的时候让index等于olis的长度减1
        if (this.index == -1) {
            this.index = this.oLis.length - 1;
        }
        this.setImge();
    }
    // index减时
    next() {
        // 当点击右边按钮时，index做自增运算
        this.index++;
        // 进行判断当index自加到olis长度时，让index等于0
        if (this.index == this.oLis.length) {
            this.index = 0;
        }
        this.setImge();
    }
    // 当点击li时li的背景和背景图片跟着变化
    clickLi() {
        let that = this;
        // 将所有的li遍历一遍让index等于当前点击的i
        for (let i = 0; i < this.oLis.length; i++) {
            this.oLis[i].onclick = function () {
                that.index = i;
                that.setImge();
            }
        }
    }

    // 扩展：当鼠标移入时循环定时器停止，当鼠标移出时定时器开始
    shuBiao() {
        let time;
        let that = this;

        // 先清空定时器
        // clearInterval(time);
        time = setInterval(function () {
            that.next();
        }, 3000)
        // 给div添加鼠标进入事件
        this.oBox.onmouseover = function () {
            clearInterval(time);
        }
        // 给div添加鼠标划出事件
        this.oBox.onmouseout = function () {
            time = setInterval(function () {
                that.next();
            }, 3000)
        }
    }

    // 点击事件
    eventBind() {
        // this在构造函数中指的是实例化对象
        // this在事件中指的是触发该事件的元素
        // 我们这里需要实例化对象的this在事件体中用，如果在事件体中直接写this指的是触发该事件的事件元素，所以我们设置一个变量用来存放指实例化对象的this
        let that = this;
        // 点击左边按钮
        this.oPre.onclick = function () {
            that.pre();
        }
        // 点击右边按钮
        this.oNext.onclick = function () {
            that.next();
        }
        // 调用点击li的函数
        this.clickLi();
        // 调用循环定时器
        this.shuBiao();

    }
}