526互联

前端学习-JavaScript学习-js基础-API02-轮播图案例

发布时间 2023-12-02 17:08:54作者: ayubene

自己写的

<!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>
        * {
            box-sizing: border-box;
        }

        .box {
            width: 700px;
            height: 450px;
        }

        .slider-head img {
            width: 100%;
        }

        .slider-head {
            font-size: 0;
        }

        .slider-foot {
            width: 100%;
            height: 18%;
            float: left;
            font-size: 0;
            background-color: rgb(100, 67, 68);
        }

        .slider-foot ul {
            height: 12px;
            padding-left: 10px;
            /* text-align: center; */
            /* line-height: 12px; */
            display: flex;
            align-items: center;
        }

        .slider-foot p {
            font-size: 20px;
            color: #fff;
            margin: 12px 15px;
        }

        

        .slider-foot ul li {
            display: inline-block;
            list-style: none;
            /* text-align: center; */
            /* padding-left: 0; */
            /* line-height: 20px; */
            /* margin: auto 0; */
            width: 8px;
            height: 8px;
            margin: 0 6px;
            border-radius: 50%;
            background-color: #fff;
            opacity: 0.4;
        }

        .slider-foot .toggle {
            float: right;
            /* margin-top: -30px; */
            margin-top: -45px;
            margin-right: 10px;
        }

        .slider-foot .toggle button {
            width: 30px;
            height: 30px;
            color: #fff;
            background-color: rgb(256, 256, 256, 0.2);
            border-radius: 5px;
            border-style: none;
            /* outline: none; */
            margin: 0 5px;
            cursor: pointer;
        }

        .slider-foot ul li.active {
            width: 12px;
            height: 12px;
            /* background-color: #fff; */
            opacity: 1;
        }
    </style>

</head>
<body>
    <div class="box">
        <div class="slider-head">
            <img src="./images/sliders/slider01.jpg" alt="">
        </div>
        <div class="slider-foot">
            <p>对人类来说会不会太超前了？</p>
            <ul>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="toggle">
                <button class="prev">&lt;</button>
                <button class="next">&gt;</button>
            </div>
        </div>
    </div>

    <script>
        const sliderData = [
            { url: './images/sliders/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
            { url: './images/sliders/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
            { url: './images/sliders/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
            { url: './images/sliders/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
            { url: './images/sliders/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
            { url: './images/sliders/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
            { url: './images/sliders/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
            { url: './images/sliders/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
        ];

        const img = document.querySelector('.slider-head img');
        const title = document.querySelector('.slider-foot p');
        const foot = document.querySelector('.slider-foot');
        const dots = document.querySelectorAll('.slider-foot ul li');
        const prev = document.querySelector('.toggle .prev');
        const next = document.querySelector('.toggle .next');

        let indexofTimer = 0;
        let indexofImg = 0;
        function startSlider() {
            console.log('bbb', indexofImg);
            indexofImg++;
            // prev.addEventListener('click', function() {
            //     indexofImg--;
            // });
            if(indexofImg === sliderData.length) {
                indexofImg = 0;
            }
            // next.addEventListener('click', function() {
            //     indexofImg++;
            // });
            document.querySelector('.active').classList.remove('active');
            document.querySelector(`.slider-foot ul li:nth-child(${indexofImg + 1})`).classList.add('active');
            img.src = sliderData[indexofImg].url;
            title.innerHTML = sliderData[indexofImg].title;
            foot.style.backgroundColor = sliderData[indexofImg].color;
        }
        indexofTimer = setInterval(startSlider, 1000);
        for(let i = 0;i < dots.length;i++) {
            dots[i].addEventListener('mouseenter', function() {
                indexofImg = i - 1;
                clearInterval(indexofTimer);
                startSlider();
            });
            
            dots[i].addEventListener('mouseleave', function() {
                indexofTimer = setInterval(startSlider, 1000);
            });
        }
        
        prev.addEventListener('click', function() {
            clearInterval(indexofTimer);
            // console.log('aaa', indexofImg);
            if(indexofImg <= 0) {
                indexofImg = sliderData.length - 2;
            }
            else{
                indexofImg -= 2;
            }
            startSlider();
            indexofTimer = setInterval(startSlider, 1000);
        });
        next.addEventListener('click', function() {
            clearInterval(indexofTimer);
            startSlider();
            // indexofImg--;
            indexofTimer = setInterval(startSlider, 1000);
        });

        prev.addEventListener('mouseenter', function() {
            prev.style.backgroundColor = 'rgb(256, 256, 256, 0.4)';
        });
        prev.addEventListener('mouseleave', function() {
            prev.style.backgroundColor = 'rgb(256, 256, 256, 0.2)';
        });
        next.addEventListener('mouseenter', function() {
            next.style.backgroundColor = 'rgb(256, 256, 256, 0.4)';
        });
        next.addEventListener('mouseleave', function() {
            next.style.backgroundColor = 'rgb(256, 256, 256, 0.2)';
        });
    </script>
</body>
</html>

照着标准的又写（抄）了一遍

<!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>
        * {
            box-sizing: border-box;
        }

        .slider {
            width: 560px;
            height: 400px;
            /* overflow: hidden; */
        }

        .slider-header {
            width: 100%;
            height: 320px;
        }

        .slider-header img {
            width: 100%;
            height: 100%;
            display: block; /*????*/
        }

        .slider-footer {
            height: 80px;
            background-color: rgb(100, 67, 68);
            padding: 12px 12px 0 12px;
            position: relative; /*????*/
        }

        .slider-footer .toggle {
            position: absolute;
            right: 0;
            top: 12px;
            display: flex;
        }

        .slider-footer .toggle button {
            margin-right: 12px;
            width: 28px;
            height: 28px;
            appearance: none;
            border: none;
            background-color: rgb(255, 255, 255, 0.1);
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }

        .slider-footer .toggle button:hover {
            background-color: rgb(255, 255, 255, 0.2);
        }

        .slider-footer p {
            margin: 0;
            color: #fff;
            font-size: 18px;
            margin-bottom: 10px;
        }

        .slider-indicator {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
        }

        .slider-indicator li {
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            background-color: #fff;
            opacity: 0.4;
            cursor: pointer;
        }

        .slider-indicator li.active {
            width: 12px;
            height: 12px;
            opacity: 1;
        }
    </style>

</head>
<body>
    <div class="slider">
        <div class="slider-header">
            <img src="./images/sliders/slider01.jpg" alt="">
        </div>
        <div class="slider-footer">
            <p>对人类来说会不会太超前了？</p>
            <ul class="slider-indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="toggle">
                <button class="prev">&lt;</button>
                <button class="next">&gt;</button>
            </div>
        </div>
    </div>

    <script>
        const sliderData = [
            { url: './images/sliders/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
            { url: './images/sliders/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
            { url: './images/sliders/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
            { url: './images/sliders/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
            { url: './images/sliders/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
            { url: './images/sliders/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
            { url: './images/sliders/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
            { url: './images/sliders/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
        ];
        const img = document.querySelector('.slider-header img');
        const p = document.querySelector('.slider-footer p');
        const bgc = document.querySelector('.slider-footer');
        const slider = document.querySelector('.slider');
        const prev = document.querySelector('.prev');
        const next = document.querySelector('.next');
        let indexofImg = 0;

        function showSlider(){
            img.src = sliderData[indexofImg].url;
            p.innerHTML = sliderData[indexofImg].title;
            bgc.style.backgroundColor = sliderData[indexofImg].color;
            document.querySelector('.slider-indicator .active').classList.remove('active');
            document.querySelector(`.slider-indicator li:nth-child(${indexofImg + 1})`).classList.add('active');
        }

        prev.addEventListener('click', function() {
            indexofImg--;
            if(indexofImg < 0) {
                indexofImg = sliderData.length - 1;
            }
            showSlider();
        });
        next.addEventListener('click', function() {
            indexofImg++;
            if(indexofImg >= sliderData.length) {
                indexofImg = 0;
            }
            showSlider();
        })
        let indexofTimer = setInterval(function() {
            next.click();
        }, 1000);
        slider.addEventListener('mouseenter', function() {
            clearInterval(indexofTimer);
        });
        slider.addEventListener('mouseleave', function() {
            indexofTimer = setInterval(function() {
                next.click();
            }, 1000);
        });
    </script>
</body>
</html>