轮播图实例和xhr对象的使用

css

 <style>
        /* ! 3. 轮播图 */
        .slider {
            max-width: 750px;
            min-width: 320px;
            margin: auto;
            padding: 0 10px;
        }
        .slider .imgs {
            /* 图片容器必须要有高度,否则下面图片不能正常显示 */
            height: 150px;
        }
        .slider .imgs img {
            height: 100%;
            width: 100%;
            border-radius: 10px;
            /* 默认图片全部隐藏,只有有active的图片才显示 */
            display: none;
        }
        .slider .imgs img:hover {
            cursor: pointer;
        }
        /* 默认显示第一张 */
        .slider .imgs img.active {
            display: block;
        }
        /* 轮播图按钮组 */
        .slider .btns {
            /* 按钮水平一排显示,用flex,且水平居中 */
            display: flex;
            place-content: center;
        }
        .slider .btns span {
            /* 按钮宽高相同,确定显示成一个正圆 */
            width: 8px;
            height: 8px;
            background-color: rgba(255, 255, 255, 0.4);
            /* 50%可确保显示为正圆 */
            border-radius: 50%;
            /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
            margin: -12px 3px 5px;
        }
        .slider .btns span.active {
            background-color: #fff;
        }
    </style>

HTML

 <div class="slider">
        <div class="imgs">
            <!-- 轮播图默认从第一张开始显示 -->
            <img src="./images/banner1.jpg" alt="" data-index="1" class="active" />
            <img src="./images/banner2.jpg" alt="" data-index="2" />
            <img src="./images/banner3.png" alt="" data-index="3" />
        </div>
        <!-- 切换按钮数量与图片数量必须一致 -->
        <div class="btns">
            <span data-index="1" class="active" onclick="setActive()"></span>
            <span data-index="2" onclick="setActive()"></span>
            <span data-index="3" onclick="setActive()"></span>
        </div>
    </div>

JS

<script>
        // 1. 获取全部图片和按钮
        const imgs = document.querySelectorAll('.slider .imgs img')
        const btns = document.querySelectorAll('.slider .btns span')
        // 2. 设置激活状态
        function setActive() {
            // 1. 清空图片和所有按钮的激活状态
            imgs.forEach(img => img.classList.remove('active'));
            btns.forEach(btn => btn.classList.remove('active'));
            // 2. 根据按钮的索引data-index来确定应该将哪一张图片显示出来class=active
            event.target.classList.add('active')
            imgs.forEach(img => {
                if (img.dataset.index === event.target.dataset.index) {
                    img.classList.add('active')
                }
            })
        }
        // 首尾相连,实现循环播放
        // 自动点击: 事件派发器
        // 间歇式触发,每隔一段固定时间会自动触发一次事件
        // setInterval: 除了回调和时间外,还可传入第三个参数,做为回调的参数
        setInterval((arr) => {
            // 1. 头部删除
            let i = arr.shift()
                // 2. 尾部追加
            arr.push(i);
            // 3. 事件派发: 模拟用户点击
            btns[i].dispatchEvent(new Event('click'))
        }, 2000, Object.keys(btns));
        // 实现鼠标悬停时自动停止播放, 离开时又自动播放
                    //鼠标悬停时停止自动播放;
                    document.querySelector('.slider .imgs').addEventListener('mouseover', () => {
                clearInterval(carousel);
                console.log('停止自动播放');
            });
            //开始自动播放
            document.querySelector('.slider .imgs').addEventListener('mouseout', () => {
                carousel = setInterval(
                    arr => {
                        let i = arr.shift();
                        arr.push(i);
                        btns[i].dispatchEvent(new Event('click'));
                    },
                    2000,
                    Object.keys(btns)
                );
                console.log('开始自动播放');
            });
    </script>

XHR对象的使用

        function getUser1(btn) {
            // 1. 创建xhr对象
            const xhr = new XMLHttpRequest;
            // 2. 响应类型
            xhr.responseType = 'json'
            // 3. 配置参数
       let url = 'http://xhr411.com/users.php?id=2'
            xhr.open('GET', url);
            // 4. 请求成功的回调
            xhr.onload = () => {
                    // 返回的值
                    console.log(xhr.response);
                    //返回的值可以进行操作以及渲染到界面上
                }
                // 5. 请求失败的回调
            xhr.onerror = () => {
                    // 返回的值
                    console.log('请求错误');
                }
                // 6. 发起xhr请求
            xhr.send(null)
        }

css

HTML

JS

XHR对象的使用

更多相关文章

随机推荐