img case1 

    <body>
    <div class="slider">
        <div class="slider-wrapper">
            <img src="./test1.png" alt="" />
            <div class = "box">X</div>
        </div>
        <div class="slider-footer">
            <p>对人类来说会不会太超前了?</p>
        <ul class="slider-indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
        </ul>
    <div_class="toggle">
        <button class="prev"><</button>
        <button class="next">></button>
    </div>
</div>
    <script>
        const sliderData = [
        {url:'./test1.png',title:'对人类来说会不会太超前了?',color:'rgb(47,37,28)'},
        {url:'./test2.png',title:'开启剑与雪的黑暗传说!',color:'rgb(43,35,26)'},
        {url:'./test3.png', title:'真正的jo厨出现了!',color:'rgb(36,31,33)'},
        {url:'./test4.png', title:'李玉刚:让世界通过B站看到东方大国文化',color:'rgb(139,98,66)'},
        {url:'./test5.png', title:'龙脉传奇!',color:'rgb(36,31,33)'},
    ]
    const buttonr = document.querySelector('.next')
    const buttonl = document.querySelector('.prev')
    const img = document.querySelector('.slider-wrapper img')
    const title = document.querySelector('.slider-footer p')
    const backgrounds = document.querySelector('.slider-footer')
    buttonl.style.backgroundColor = "red"
    buttonr.style.backgroundColor = "olive"
    const box = document.querySelector('.slider')


    let i = 0

    buttonr.addEventListener('click',function(){
        i++
        if(i>=sliderData.length){
            i = 0
        }
        common()
    })
    buttonl.addEventListener('click',function(){
        i--
        if(i < 0){
            i = sliderData.length - 1
        }
        common()
    })
    function common(){
        console.log(sliderData[i])
        img.src = sliderData[i].url
        title.innerHTML = sliderData[i].title
        backgrounds.style.backgroundColor= sliderData[i].color
        document.querySelector('.slider-indicator .active').classList.remove('active')
        document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }
    let fn = setInterval(function(){
        buttonr.click()
    },1000)
    box.addEventListener('mouseenter',function(){
        clearInterval(fn)
    })
    box.addEventListener('mouseleave',function(){
        fn = setInterval(function(){
        buttonr.click()
    },1000)
    })
    </script>
</body>

　　

posted @ 2024-04-23 18:55  JASON_yul  阅读(8)  评论(0)    收藏  举报