JavaScrpt---DOM案例-轮播图

xyue_

已于 2022-05-17 21:09:20 修改

阅读量197

点赞数

文章标签： javascript css 前端

于 2022-05-17 20:12:36 首次发布

本文链接：https://blog.csdn.net/xyue_/article/details/124828839

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        .container {
            width: 400px;
            height: 300px;
            position: relative;
            margin: 0 auto;
            overflow: hidden;
        }

        .swiper {
            width: 2400px;
            height: 300px;
            position: absolute;
            left: -400px;
        }

        .swiper img {
            float: left;
            width: 400px;
            height: 300px;
        }

        @font-face {
            font-family: "arraw";
            src: url(font/iconfont.ttf);
        }

        .but {
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-family: "arraw";
            font-size: 20px;
            background-color: rgba(0, 0, 0, .5);
            position: absolute;
            top: 135px;
            color: white;
        }

        #prev {
            left: 10px;
            cursor: pointer;
        }

        #next {
            right: 10px;
            cursor: pointer;
        }

        .dots {
            width: 400px;
            height: 30px;
            /* background-color: pink; */
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .dot {
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
            margin: 0 15px;
        }

        .dot:hover {
            cursor: pointer;
        }

        .checked {
            background-color: deepskyblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 图片 -->
        <div class="swiper">
            <img src="img/baby.png" alt="">
            <img src="img/迪丽热巴.png" alt="">
            <img src="img/谭松韵。.png" alt="">
            <img src="img/zly.png" alt="">
            <img src="img/baby.png" alt="">
            <img src="img/迪丽热巴.png" alt="">
        </div>
        <!-- 按钮 -->
        <div id="prev" class="but" onclick="prev()">&#xe505;</div>
        <div id="next" class="but" onclick="next()">&#xe603;</div>
        <!-- 显示点 -->
        <div class="dots">
            <div class="dot checked" onclick="toScroll(1)"></div>
            <div class="dot" onclick="toScroll(2)"></div>
            <div class="dot" onclick="toScroll(3)"></div>
            <div class="dot" onclick="toScroll(4)"></div>
        </div>
    </div>
</body>
<script>
    var dSwiper = document.querySelector('.swiper');
    var dDots = document.querySelectorAll('.dot');
    // 1.自动 每5秒自动轮播到下一张
    // 2.手动 点击按钮发生动作

    var timer = null; // 每5秒
    var swiperTimer = null; //切换

    var showIndex = 1; // 当前显示图片的下标
    var myWidth = 400; //单位宽度

    var autoCount = 0 //自动轮播计数
    // 自动轮播
    timer = setInterval(function () {
        autoCount++;
        if (autoCount === 10) {
            autoCount = 0;
            next();
        }

    }, 500)

    // 下一张
    function next() {

        toScroll(showIndex + 1);
    }
    // 上一张
    function prev() {
        toScroll(showIndex - 1);
    }
    // 轮播的函数
    function toScroll(targetIndex) {
        autoCount = 0;
        // 完成两张图片的切换
        // 路程
        var s = -1 * targetIndex * myWidth - dSwiper.offsetLeft;
        var t = 20; // swiperTime执行20次完成图片切换
        var v = s / t;
        var count = 0;
        clearInterval(swiperTimer);
        swiperTimer = setInterval(function () {
            count++;
            var l = dSwiper.offsetLeft + v;
            dSwiper.style.left = l + 'px';
            if (count === t) {
                // 完成了切换
                clearInterval(swiperTimer);
                if (targetIndex === 0) {
                    // 需要跳转到倒数第2张
                    targetIndex = 4;
                } else if (targetIndex === 5) {
                    // 需要跳转到第二张
                    targetIndex = 1;
                }

                // 防止出现偏差
                dSwiper.style.left = -1 * targetIndex * myWidth + 'px';
                // 上一个点
                dDots[showIndex - 1].className = "dot";
                // 更改showIndex的值
                showIndex = targetIndex;
                // 当前点
                dDots[showIndex - 1].className = "dot checked";
            }
        }, 30)
    }
</script>

</html>

点击左右箭头会相应变换
点击小圆点会相应变换
会自动轮播
效果展示：
在这里插入图片描述

xyue_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScrpt---DOM案例-轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播
复制链接

扫一扫