【js案例】定时版轮播图

最新推荐文章于 2024-06-20 20:20:21 发布

原神星铁高手

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/2301_79124729/article/details/134481327

版权

案例实现每过两秒对图中图片，文案，文字背景色，底部小圆点进行改变：

效果图：

全代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .wrap{
        box-sizing: border-box;
    }
    .slider{
        margin: auto;
        width: 560px;
        height: 400px;
        overflow: hidden;
    }
    .slider-wrapper{
        width: 100%;
        height: 320px;
    }
    .slider-wrapper img{
        width: 100%;
        height: 100%;
        display: block;
    }
    .footer{
        height: 80px;
        background-color:rgb(36,31,33);
        padding: 12px 12px 0 12px;
        position: relative;
    }
    p{
        margin: 0;
        color: white;
        font-size: 18px;
        margin-bottom: 10px;
    }
    .indicator{
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
    }
    .indicator li{
        width: 8px;
        height: 8px;
        margin: 4px;
        border-radius: 50%;
        background: #fff;
        opacity: 0.4;
        cursor: pointer;
    }
    ul .active{
        width: 10px;
        height: 10px;
        opacity: 1;
    }
</style>
<body>
    <div class="wrap">

        <div class="slider">
            <div class="slider-wrapper">
                <img src="./img/1.jpg" alt="">
            </div>
            <div class="footer">
                <p>天使</p>
                <ul class="indicator">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>


    </div>
</body>
<script>
//创建对象数组，存储切换后的图片，文案，背景色
    const sliderData = [
        {url:'./img/1.jpg',title:'天使',color:'rgb(36,31,33)'},
        {url:'./img/2.jpg',title:'幽灵',color:'rgb(166,131,143)'},
        {url:'./img/3.jpg',title:'boom',color:'rgb(36,31,33)'},
        {url:'./img/4.jpg',title:'深海',color:'rgb(43,35,26)'},
        {url:'./img/5.jpg',title:'anger',color:'rgb(99,72,114)'}
    ]
//获取css标签
    const img = document.querySelector('img')
    const title = document.querySelector('.footer p')
    const color = document.querySelector('.footer')
//使用间歇函数
    let i = 0
    setInterval(function(){
        i++;
        img.src = sliderData[i].url
        title.innerHTML = sliderData[i].title
        color.style.backgroundColor = sliderData[i].color
//对底部小圆点进行样式切换
        document.querySelector('ul .active').classList.remove('active')
        document.querySelector(`ul li:nth-child(${i+1})`).classList.add('active')

        if(i==4){
            i=-1;
        }
    },2000)
</script>
</html>