原生JS 缓动轮播图

最新推荐文章于 2022-08-16 22:33:39 发布

是詹詹呐 .

最新推荐文章于 2022-08-16 22:33:39 发布

阅读量203

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_44398237/article/details/104870098

版权

☞ 为了更直观没有隐藏其他图片
在这里插入图片描述

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .nav {
            width: 480px;
            height: 200px;
            background-color: darkgoldenrod;
            margin: 200px auto;
            position: relative;
        }
        
        .uls {
            width: 700%;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .uls li {
            float: left;
        }
        
        img {
            width: 480px;
            height: 200px;
        }
        
        ol {
            width: 110px;
            height: 20px;
            position: absolute;
            bottom: 10px;
            border-radius: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(78, 88, 78, .57);
        }
        
        ol li {
            width: 6px;
            height: 6px;
            border-radius: 2px;
            background-color: rgb(231, 230, 243);
        }
        
        .right {
            right: 0;
        }
        
        .left,
        .right {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
            width: 30px;
            height: 70px;
            color: #fff;
            text-decoration: none;
            text-align: center;
            line-height: 70px;
            background-color: rgba(114, 114, 114, 0.582);
        }
        
        .col {
            width: 10px;
            background-color: darkturquoise;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="javascript:;" class="left">
            <</a>
                <a href="javascript:;" class="right">></a>
                <ul class="uls">
                    <li><img src="images/1.jpg" alt=""></li>
                    <li><img src="images/2.jpg" alt=""></li>
                    <li><img src="images/3.jpg" alt=""></li>
                    <li><img src="images/4.jpg" alt=""></li>
                    <li><img src="images/5.jpg" alt=""></li>
                    <li><img src="images/6.jpg" alt=""></li>
                </ul>
                <ol class="ols">
                    <li class="col"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
    </div>
</body>


<script>
    var nav = document.querySelector('.nav');
    var ul = document.querySelector('.uls');
    var ol = document.querySelector('.ols');
    var la = document.querySelector('.left');
    var ra = document.querySelector('.right');
    // 
    var navWidth = nav.offsetWidth;
    var timer = null;
    var i = 0;
    var y = 0;
    // 动画函数
    function ainmate(obj, tag) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            step = (tag - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == tag) {
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 20)
    }

    // 圆点
    for (var k = 0; k < ol.children.length; k++) {
        ol.children[k].index = k;
        ol.children[k].onclick = function() {
            for (var k = 0; k < ol.children.length; k++) {
                ol.children[k].className = '';
            }
            this.className = 'col';
            var index = this.index;
            ainmate(ul, -index * navWidth);
            // 赋值  解决圆点点击后和图片不同步的BUG
            i = index;
            y = index;
        }
    }
    // 克隆
    var flise = ul.children[0].cloneNode(true);
    ul.appendChild(flise);
    // 按钮
    // 右按钮
    ra.onclick = function() {
        if (i == 6) {
            ul.style.left = 0;
            i = 0;
        }
        i++;
        ainmate(ul, -i * navWidth);
        // 圆点跟随
        for (var j = 0; j < ol.children.length; j++) {
            ol.children[j].className = '';
        }
        y++;
        if (y == 6) y = 0;
        ol.children[y].className = 'col';
    }

    // 左按钮
    la.onclick = function() {
        if (i == 0) {
            ul.style.left = -6 * navWidth + 'px';
            i = 6;
        }
        i--;
        ainmate(ul, -i * navWidth);
        // 圆点跟随
        for (var j = 0; j < ol.children.length; j++) {
            ol.children[j].className = '';
        }
        y--;
        if (y == 0) y = 6;
        ol.children[i].className = 'col';
    }


    // 自动播放
    var timers = setInterval(function() {
        // 手动调用点击事件
        ra.click();
    }, 2000)

    // 
    // 移入暂停
    nav.onmouseover = function() {
        clearInterval(timers);
    }

    // 移除继续
    nav.onmouseout = function() {
        timers = setInterval(function() {
            // 手动调用点击事件
            ra.click();
        }, 2000)
    }
</script>

</html>

是詹詹呐 .

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS 缓动轮播图

☞ 为了更直观没有隐藏其他图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫