亲宝软件园·资讯

展开

JS使用定时器与事件监听实现轮播图切换功能

可乐不撒 人气:0

HTML部分

html部分比较简单,这里直接上代码

页面中默认显示第一张图片

ps.这里我找了四张图,所以有四个li

<div class="box">
    <img src="./images/1.jpg" alt="">
    <!-- 图片下方小圆点 -->
    <ol>
        <!-- 开始给第一个小圆点设置默认active类 代表点击选中的状态-->
        <li class="active "></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>

CSS部分

 给轮播图盒子以及小圆点添加样式

        /* 清除页面默认内外边距 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 给轮播图容器盒子设置宽高和相对定位 */
        .box {
            position: relative;
            width: 382px;
            height: 237px;
            margin: 100px auto;
        }

        img {
            width: 100%;
            height: 100%;
        }

        /* 给小圆点设置绝对定位,定到图片下方 */
        ol {
            /* 改为弹性容器 */
            display: flex;
            position: absolute;
            width: 80px;
            bottom: 10px;
            left: 50%;
            transform: translate(-50%, 0);
            list-style: none;
            /* 设置li的主轴对齐方式 */
            justify-content: space-between;
        }

        /* 每一个小圆点设置背景黑色半透明和鼠标样式 */
        li {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            cursor: pointer;
        }

        /* 选中状态下得小圆点样式,改背景色为白色半透明 */
        .active {
            background-color: rgba(255, 255, 255, 0.8);
        }

JavaScript部分

 首先将需要展示的图片地址存入数组

let arr = ['./images/1.jpg', './images/2.jpg', './images/3.jpg', './images/4.jpg']

使用定时器间歇函数,实现自动切换图片的效果

这里代码比较简单,我都写了详细注释

        // 设置一个计数器变量
        let i = 0
        // setInterval(function(){},2000) 设置2000ms执行一次
        // 这里function(){}里面就是切换图片和小圆点样式的函数
        setInterval(function () {
            i++
            // 如果切换到最后一张图的时候,把计数器归零
            if (i > arr.length - 1) {
                i = 0
            }
            // 获取页面中的img标签,注意这里页面中只有一个img,
            // 所以使用querySelector,如果有多个就使用querySelectorAll
            // 两者返回的值不同,前者返回的是一个对象类型,后者返回的是一个伪数组类型
            let imgSet = document.querySelector('img')
            // 更改img标签的src属性为新的地址
            imgSet.src = arr[i]
            // 获取所有的小圆点
            let point = document.querySelectorAll('li')
            // 获取所有类名为active的标签,并清空类名,达到恢复小圆点为默认样式的效果
            document.querySelector('.active').className = ''
            // 给当前小圆点添加active类名,设为选中状态
            point[i].className = 'active'
        }, 2000)

最后就是事件监听实现自由切换图片功能

        // 使用getElementsByTagName找到所有的li小圆点,得到的是伪数组
        let click = document.getElementsByTagName('li')
        // 这是for循环,遍历得到的伪数组
        for (let j = 0; j < click.length; j++) {
            // 给当前小圆点添加事件监听,监听鼠标点击效果
            click[j].addEventListener('click', function () {
                清除所有有active类名的类
                document.querySelector('.active').className = ''
                // 代码跟上面相同,就不解释了
                click[j].className = 'active'
                let imgSet = document.querySelector('img')
                imgSet.src = arr[j]
                // 将计数器设置为当前圆点
                i = j
            })
        }

完整代码如下

<!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 {
            position: relative;
            width: 382px;
            height: 237px;
            margin: 100px auto;
        }

        img {
            width: 100%;
            height: 100%;
        }

        /* 给小圆点设置绝对定位,定到图片下方 */
        ol {
            /* 改为弹性容器 */
            display: flex;
            position: absolute;
            width: 80px;
            bottom: 10px;
            left: 50%;
            transform: translate(-50%, 0);
            list-style: none;
            /* 设置li的主轴对齐方式 */
            justify-content: space-between;
        }

        /* 每一个小圆点设置背景黑色半透明和鼠标样式 */
        li {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            cursor: pointer;
        }

        /* 选中状态下得小圆点样式,改背景色为白色半透明 */
        .active {
            background-color: rgba(255, 255, 255, 0.8);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/1.jpg" alt="">
        <!-- 图片下方小圆点 -->
        <ol>
            <li class="active "></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>


    <script>
        let arr = ['./images/1.jpg', './images/2.jpg', './images/3.jpg', './images/4.jpg']

        // 设置一个计数器变量
        let i = 0
        // setInterval(function(){},2000) 设置2000ms执行一次
        // 这里function(){}里面就是切换图片和小圆点样式的函数
        setInterval(function () {
            i++
            // 如果切换到最后一张图的时候,把计数器归零
            if (i > arr.length - 1) {
                i = 0
            }
            // 获取页面中的img标签,注意这里页面中只有一个img,
            // 所以使用querySelector,如果有多个就使用querySelectorAll
            // 两者返回的值不同,前者返回的是一个对象类型,后者返回的是一个伪数组类型
            let imgSet = document.querySelector('img')
            // 更改img标签的src属性为新的地址
            imgSet.src = arr[i]
            // 获取所有的小圆点
            let point = document.querySelectorAll('li')
            // 获取所有类名为active的标签,并清空类名,达到恢复小圆点为默认样式的效果
            document.querySelector('.active').className = ''
            // 给当前小圆点添加active类名,设为选中状态
            point[i].className = 'active'
        }, 2000)

        // 使用getElementsByTagName找到所有的li小圆点,得到的是伪数组
        let click = document.getElementsByTagName('li')
        // 这是for循环,遍历得到的伪数组
        for (let j = 0; j < click.length; j++) {
            // 给当前小圆点添加事件监听,监听鼠标点击效果
            click[j].addEventListener('click', function () {
                清除所有有active类名的类
                document.querySelector('.active').className = ''
                // 代码跟上面相同,就不解释了
                click[j].className = 'active'
                let imgSet = document.querySelector('img')
                imgSet.src = arr[j]
                // 将计数器设置为当前圆点
                i = j
            })
        }

    </script>
</body>

</html>

总结

 前面实现自动切换的时候还好,但是在实现手动切换的时候,一开始没有弄明白querySelector和querySelectorAll返回值得区别,不知道怎么获取到底是哪一个小圆点鼠标单击点击,所以一开始使用的是笨办法,选中每一个小圆点添加事件绑定实现手动切换,代码比较冗余,最会研究了一晚上,才搞明白两者返回的值不同,前者返回的是一个对象类型,后者返回的是一个伪数组类型,如果想更改伪数组里的属性,必须先遍历一下数组,使用for循环遍历之后给每一个小圆点添加事件监听切换图片和圆点样式

效果图

加载全部内容

相关教程
猜你喜欢
用户评论