JavaScript综合案例四

尽欢i

已于 2023-04-18 11:56:42 修改

阅读量56

点赞数

分类专栏： # HTML+CSS+JavaScript 文章标签：前端 javascript

于 2023-04-18 11:48:43 首次发布

本文链接：https://blog.csdn.net/weixin_62421736/article/details/130216819

版权

HTML+CSS+JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、实战案例：定时轮播图案例-中版

代码实现

总结

一、实战案例：定时轮播图案例-中版

需求:每隔一秒自动切换一个图片和标题、小圆点颜色

分析:

1.准备一个数组对象，存储详细信息

2.获取元素

3.设置间歇函数，定时修改图片和标题小圆点

4.处理图片自动复原，从头播放

代码实现

<!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>
</head>
<style>
    .newbh{
        color: red;
    }
    img{
        height: 100px;
        width: 200px;
    }
</style>
<body>
    <div>
        <div class="div2">
            <img src="1.jpg" >
            <div>
                <span id="a">熊猫能有什么坏心思</span>
                <div>
                    <ul>
                        <li class="newbh"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    //准备一个数组对象，存储详细信息
    let message = [
        {src:'1.jpg',title:'熊猫能有什么坏心思'},
        {src:'2.jpg',title:'小兔子为什么这么白？'},
        {src:'3.jpg',title:'狗狗对人类很忠诚'},
        {src:'4.jpg',title:'猫咪凶起来谁都不怕'}
    ]

    let i = 0

    //获取元素
    const imgObject = document.querySelector('img')
    const spanObject = document.querySelector('#a')


    //设置间歇函数，定时修改图片和标题、小圆点
    let id = setInterval(fn , 1000)

    function fn(){
        i++
        //判断是否超过了最后一张，如果是，则重新赋值为0，图片从头开始播放
        if( i == message.length){
            i = 0
        }
        //更新图片和标题
        imgObject.src = message[i].src
        spanObject.innerHTML = message[i].title
        //选出含有newbh的li标签对象，然后将其class删除
        const liObject = document.querySelector('.newbh')
        liObject.classList.remove('newbh')
        const ulliObject = document.querySelector(`ul li:nth-child(${i+1})`)
        ulliObject.classList.add('newbh')
    }
</script>
</html>