web API-DOM-案例-定时换图效果图

最新推荐文章于 2024-10-10 20:59:20 发布

Q _Q

最新推荐文章于 2024-10-10 20:59:20 发布

阅读量258

点赞数

分类专栏： web API 文章标签：前端 css css3 html javascript

本文链接：https://blog.csdn.net/weixin_54021642/article/details/131758058

版权

web API 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

代码：

<!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;
        }
        .box{
            position: relative;
            width: 700px;
            height: 320px;
            margin: 200px auto;
        }
        p{
            position: absolute;
            left: 0;
            bottom: 0;
            line-height: 50px;
            background-color: #666;
            color: #fff;
            width: 100%;
            padding-left: 10px;
            font-size: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/b01.jpg">
        <p>1 答题</p>
    </div>

    <script>
        // 查找DOM对象
        let img = document.querySelector('img')
        let p = document.querySelector('p')

        // 图片数组
        let array_pics = [
            {src: './images/b01.jpg', desc: '1 答题'},
            { src: './images/b02.jpg', desc: '2 演唱会' },
            { src: './images/b03.jpg', desc: '3 迷你专辑' },
            { src: './images/b04.jpg', desc: '4 我为歌狂' },
        ]

        // 准备一个变量，作为数组下标
        let num = 0

        // 定时执行切换图片函数
        function autoPlay(){
            // 自加
            num++
            // 如果num超出数组长度则重置为0
            if(num >= array_pics.length){
                num = 0
            }
            // 解套出对象
            let obj = array_pics[num]
            // 更换图片
            img.src = obj.src
            // 更换文字描述
            p.innerHTML = obj.desc
        }

        // 开启计时器
        setInterval(autoPlay, 1000)
    </script>
</body>
</html>

效果图：