【js案例】完整版轮播图-CSDN博客

本文链接：https://blog.csdn.net/2301_79124729/article/details/134520701
实现定时播放，点击播放，鼠标进入关闭播放，鼠标离开开启播放
轮播图样式：
代码：
<!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;
    }
    .left{
        left: 480px;
        top: 40px;
        position: absolute;
        width: 30px;
        height: 30px;
        opacity: 0.5;
        background-color: #fff;
        border-radius: 20%;
        color: #c5c5c5;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .right{
        left: 520px;
        top: 40px;
        position: absolute;
        width: 30px;
        height: 30px;
        opacity: 0.5;
        background-color: #fff;
        border-radius: 20%;
        color: #c5c5c5;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
</style>
<body>
    <div class="wrap">

        <div class="slider">
            <div class="slider-wrapper">
                <img src="./img/1.jpg" alt="">
            </div>
            <div class="footer">
                <p>天使</p>
                <div class="left"><</div>
                <div class="right">></div>
                <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)'}
    ]
    //属性获取
    const slider = document.querySelector('.slider')
    const img = document.querySelector('img')
    const title = document.querySelector('.footer p')
    const color = document.querySelector('.footer')
    const left = document.querySelector('.left')
    const right = document.querySelector('.right')

    let i = 0

    //编写页面属性切换函数
    function change(){
        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')
    }
    //定时器自动播放
   let time = setInterval(function(){
        i++;
        change()
        if(i==4){
            i=-1;
        }
    },2000)
    //点击下一张
    right.addEventListener('click',function(){
        if(i==4){
            i=-1;
        }
        i++
        change()
    })
    //点击上一张
    left.addEventListener('click',function(){
        if(i==0){
            i=5;
        }
        i--
        change()
    })

    //鼠标进入定时器关闭
    slider.addEventListener('mouseenter',function(){
        clearInterval(time)
    })
    //鼠标离开定时器开启
    slider.addEventListener('mouseleave',function(){
        clearInterval(time)

        time = setInterval(function(){
            i++;
            change()
            if(i==4){
                i=-1;
            }
        },2000)
    })
</script>
</html>