轮播图滑动效果

最新推荐文章于 2024-05-14 17:19:58 发布
xsijisw21
最新推荐文章于 2024-05-14 17:19:58 发布
阅读量218
点赞数 1
分类专栏：前端文章标签： css html javascript
本文链接：https://blog.csdn.net/xsijisw21/article/details/124898053
版权
前端专栏收录该内容
7 篇文章 0 订阅
订阅专栏
<!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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .clearfix::after,
        .clearfix::before {
            content: '';
            display: table;
            clear: both;
        }
        
        a {
            text-decoration: none;
            color: #fff;
        }
        
        ul {
            list-style: none;
        }
        
        .box {
            width: 400px;
            height: 150px;
            position: relative;
            margin: 100px 0px 0px 400px;
            /* border: 1px rgb(71, 180, 96) solid; */
            overflow: hidden;
        }
        
        .box .p {
            /* border: 1px red solid; */
            width: 2000px;
            height: 100%;
            position: absolute;
            left: 0;
        }
        
        .box .p li {
            width: 400px;
            height: 100%;
            float: left;
        }
        
        img {
            width: 100%;
            height: 100%;
        }
        
        .left,
        .right {
            position: absolute;
            transform: translateY(-50%);
            z-index: 2;
        }
        
        .left {
            left: 0;
            top: 50%;
        }
        
        .right {
            right: 0;
            top: 50%;
        }
        
        .cir {
            position: absolute;
            right: 30px;
            bottom: 20px;
            height: 10px;
        }
        
        .cir li {
            display: inline-block;
            margin-left: 2px;
            height: 10px;
            width: 10px;
            border-radius: 50%;
            border: 2px solid #fff;
        }
        
        .current {
            background-color: rgb(253, 144, 61);
        }
    </style>
</head>

<body>
    <div class="box">
        <a class="left" href="javascript:;">&lt</a>
        <a class="right" href="javascript:;">&gt</a>

        <ul class="p">
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
        </ul>
        <ul class="cir"></ul>
    </div>

    <script>
        let lis = document.querySelectorAll('.p li')
        let box = document.querySelector('.box')
        let ul = document.querySelector('.p')
        let left = document.querySelector('.left')
        let right = document.querySelector('.right')
        let cir = document.querySelector('.cir')
        let index = 0;

        //再ol中添加li
        for (let i = 0; i < lis.length; i++) {
            //创建li
            let li = document.createElement('li');
            //记录当前小圆圈的索引号
            li.setAttribute('data-index', i);
            //将li插入ul当中去
            cir.appendChild(li)
                // 圆点点击事件（排他思想）
            li.addEventListener('click', function() {
                for (let i = 0; i < cir.children.length; i++) {
                    cir.children[i].className = '';
                }
                this.className = 'current';
                index = this.getAttribute('data-index');
                animate(ul, -box.clientWidth * index)

            })
        }
        // 一开始设置第一个小圆点
        cir.children[0].className = 'current'
            //克隆第一张图片放在ul最后面（解决小圆点多一个的问题）
        ul.appendChild(ul.children[0].cloneNode(true))

        //点击右侧按钮滚动
        function goRight() {
            if (index == 4) {
                ul.style.left = 0;
                index = 0;
            }

            index++;
            animate(ul, -box.clientWidth * index)

        }
        //小圆点跟随切换class Name
        function active() {
            //如果data-index==index
            //则原点的添加current类其它没有
            for (let i = 0; i < cir.children.length; i++) {
                let dataIndex = cir.children[i].getAttribute('data-index');
                for (let j = 0; j < cir.children.length; j++) {
                    cir.children[j].className = '';
                    //解决小圆点再第五张图片上class问题
                    if (index == 4) {
                        cir.children[0].className = 'current'
                    }
                }
                if (index == dataIndex) {
                    cir.children[index].className = 'current';
                    break;
                }
            }

        }
        //左侧滚动
        function goLeft() {
            if (index == 0) {
                index = ul.children.length - 1;
                //把ul整体向左移
                ul.style.left = -index * box.clientWidth + 'px';
            }
            index--;
            animate(ul, -box.clientWidth * index)
        }
        //绑定点击事件监听
        left.addEventListener('click', function() {
            goLeft();
            active();
        })

        right.addEventListener('click', function() {
                goRight();
                active();
            })
            // 自动播放
        let timer = setInterval(function() {
            goRight();
            active();
        }, 2000);
        box.addEventListener('mouseenter', function() {
            clearInterval(timer)
            timer = null;
        })
        box.addEventListener('mouseleave', function() {
                timer = setInterval(function() {
                    goRight();
                    active();
                }, 2000)
            })
            //写个函数要有滚动的效果
            //tag:为标签名，distance为移动的距离
        function animate(tag, distance) {
            clearInterval(tag.timer)
            tag.timer = setInterval(() => {
                //缓慢动画算法
                let step = (distance - tag.offsetLeft) / 10;
                //如果不写这个会有误差（一张图片不能完整的装在框里）
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (tag.offsetLeft == distance) {
                    clearInterval(tag.timer)
                }
                tag.style.left = tag.offsetLeft + step + 'px'
            }, 15)
        }
    </script>

</body>

</html>