自动轮播图

最新推荐文章于 2022-12-04 09:00:00 发布

胖子不会武功

最新推荐文章于 2022-12-04 09:00:00 发布

阅读量336

点赞数

文章标签： html5 javascript css

本文链接：https://blog.csdn.net/weixin_44183003/article/details/119345444

版权

刚开始学习前端知识，有什么做得不好，望各位多多指教下，谢谢！

实现功能：

1.自动播放图片

2.鼠标放到图片上，显示左右两边按钮，且图片停止自动播放，鼠标离开，两边按钮隐藏，图片继续自动播放

3.点击下方小圆圈，可自动跳转到小圆圈所对应的图片。

实现代码：

HTML+CSS+JavaScript，源码在下面。

HTML+CSS：

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        div {
            position: relative;
            width: 800px;
            height: 500px;
            border-radius: 10px;
            margin: 100px auto;
            overflow: hidden;
        }

        .c {

            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background: rgba(0, 0, 0, .1);
            color: white;
            border-radius: 15px;
        }

        .left {
            display: none;
            position: absolute;
            left: 0;
            top: 50%;
            z-index: 999;
        }

        .right {
            display: none;
            position: absolute;
            right: 0;
            top: 50%;
            z-index: 999;
        }

        div ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 600%;

        }

        div ul li {
            float: left;
        }

        div>ul>li img {
            width: 800px;
            height: 500px;

        }

        div ol {
            position: absolute;
            bottom: 10px;
            left: 50px;

        }

        div ol li {
            float: left;
            width: 10px;
            height: 10px;
            border: 2px solid rgba(255, 255, 255, 0.5);
            margin: 0 3px;
            border-radius: 50%;
            cursor: pointer;
        }

        .current {
            background-color: white;
        }
    </style>
    <script src="lunbotu.js"></script>
</head>

<body>
    <div>
        <!-- 左侧按钮 -->
        <a href="javascript:;" class="left c" id="left">&lt;</a>
        <!-- 右侧按钮 -->
        <a href="javascript:;" class="right c" id="right">&gt;</a>
        <ul>
            <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
        </ul>
        <ol>

        </ol>
    </div>
</body>

</html>

核心代码JS：

window.addEventListener('load', function () {
    var div = document.querySelector('div');
    var left = document.querySelector('#left');
    var right = document.querySelector('#right');
    var divwidth = div.offsetWidth;

    // 鼠标放上去，显示左右箭头
    div.addEventListener('mouseenter', function () {
        left.style.display = 'block';
        right.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })
    // 鼠标离开，左右箭头隐藏
    div.addEventListener('mouseleave', function () {
        left.style.display = 'none';
        right.style.display = 'none';

        timer = setInterval(function () {
            right.click();
        }, 3000);
    });

    // 动态生成轮播图中的小圆圈
    var ul = document.querySelector('ul');
    var ol = document.querySelector('ol');
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index', i);
        ol.appendChild(li);

        // 鼠标点击那个小圆圈，哪个小圆圈就变成白色
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';

            // 点击小圆圈，移动图片

            var index = this.getAttribute('index');
            num = index;
            num1 = index;
            var ulmove = divwidth * index;
            animate(ul, -ulmove);
        })
    };

    // 默认第一个小圆圈白色
    ol.children[0].className = 'current';

    // 图片无缝滚动操作
    var one = ul.children[0].cloneNode(true);
    ul.appendChild(one);
    // 点击右箭头，图片滑动
    var num = 0;
    var num1 = 0;
    var flag = true;
    right.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -divwidth * num, function () {
                flag = true;
            });

            // 每次点击小圆圈跟随着动
            num1++;
            if (num1 == ul.children.length - 1) {
                num1 = 0;
            }

            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            ol.children[num1].className = 'current';
        }
    });

    // 点击左箭头，图片滑动
    left.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * divwidth + 'px';

            }
            num--;
            animate(ul, -divwidth * num, function () {
                flag = true;
            });

            // 每次点击小圆圈跟随着动
            num1--;
            if (num1 < 0) {
                num1 = ol.children.length - 1;
            }

            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            ol.children[num1].className = 'current';
        }
    });

    // 自动播放功能，手动点击事件
    var timer = setInterval(function () {
        right.click();
    }, 3000);

    // 封装好一个动画函数
    function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
                if (callback) {
                    callback();
                }
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 30)
    }
})