【JS实现】轮播图-自动播放，左右按钮点击切换，焦点点击切换

昼白 • 2021-08-29 • CSS/HTML/JavaScript • 269 阅读

效果

技术点

挺难的，需要不断练习，代码都能看懂，就是思维想不到

实现

主体

<!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>
    <!-- animate.js必须放在index.js上面，注意顺序 -->
    <script src="js/animate.js"></script>
    <script src="js/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .focus {
            overflow: hidden;
            position: relative;
            width: 800px;
            height: 400px;
            margin: 100px auto;
        }
        .focus img {
            width: 800px;
            height: 400px;
        }
        .arrow-l {
            display: none;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -30px;
            width: 30px;
            height: 60px;
            background-color: pink;
            z-index: 99;
        }
        .arrow-r {
            display: none;
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -30px;
            width: 30px;
            height: 60px;
            background-color: pink;
            z-index: 99;
        }
        .focus ol {
            position: absolute;
            bottom: 10px;
            left: 50%;
            /* width: 80px; */
            height: 16px;
            margin-left: -40px;
            background-color: pink;
        }
        .focus ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 500%;
        }
        .focus ul li {
            float: left;
        }
        .focus ol li {
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin: 3px;
            background-color: red;
        }
        .focus .current {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="focus">
        <!-- 左侧按钮 -->
        <a href="javascript:;" class="arrow-l"></a>
        <!-- 右侧按钮 -->
        <a href="javascript:;" class="arrow-r"></a>
        <ul>
            <li><a href="#"><img src="img/focus.png"></a></li>
            <li><a href="#"><img src="img/focus2.jpg"></a></li>
            <li><a href="#"><img src="img/focus3.jpg"></a></li>
            <li><a href="#"><img src="img/focus4.jpg"></a></li>
        </ul>
        <ol class="circle">
        </ol>
    </div>
</body>
</html>

animate.js文件

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';
            }, 15);
        }

 

index.js文件

window.addEventListener('load', function() {
    // 1. 获取左右按钮
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    // 获取图片宽度
    var focusWidth = focus.offsetWidth;
    // 2. 鼠标经过隐藏左右按钮
    // mouseover会冒泡，mouseenter不会冒泡
    focus.addEventListener('mouseenter', function() {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        // 清除定时器
        clearInterval(timer);
        timer = null;
    });
    focus.addEventListener('mouseleave', function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        // 开启定时器
        timer = setInterval(function() {
            // 手动调用事件
            arrow_r.click();
        }, 3000);
    });
    // 3. 获取ul事件,动态生成小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('ol');
    for (var i = 0; i <ul.children.length; i++) {
        // 创建一个小Li
        var li = document.createElement('li');
        // 设置小圆圈的索引号，通过自定义属性来做
        li.setAttribute('index', i);
        // 把li插入ol中
        ol.appendChild(li);
        // 因为ul里的Li数量和ol里的li数量相等 所以直接写在这个循环中
        // 排他思想
        // 4. 点击小圆圈，目标小圆圈变色，其他去除变色状态
        li.addEventListener('click', function() {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            } 
            this.className = 'current';
            // 5. 点击小圆圈，移动图片
            // 当我们点击了小圆圈，就拿到当前小圆圈的索引号
            var index = this.getAttribute('index');
            // 当我们点击了某个小圆圈 就要拿到当前小圆圈的索引号给num
            num = index;
            // 当我们点击了某个小圆圈 就要拿到当前小圆圈的索引号给circle
            circle = index;
            // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度  注意：是负值
            animate(ul, -focusWidth * index);
        })
    }
    // 把ol里第一个小li设置类名为current
    ol.children[0].className = 'current';
    // 6. 克隆第一张图片 放在最后面 因为写在了生成小圆圈的下面，所以小圆圈数量无异常
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 7. 点击右侧按钮，图片滚动
    var num = 0;
    // circle 控制小圆圈的播放
    var circle = 0;
    // 节流阀
    var flag = true;
    arrow_r.addEventListener('click',function() {
        if (flag) {
            flag = false;//关闭节流阀
             // 如果走到最后一张复制图片， 此时， 我们的ul 要快速复原 left 该为 0
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * focusWidth, function() {
                flag = true;//打开节流阀
            });
            // 8. 点击右侧按钮，小圆圈跟随一起变化 使用声明变量circle
            circle++;
            // 如果circle == 4 说明走到最后我们克隆的这张图片了。我们就复原
            // if (circle == ul.children.length) {
            //     circle = 0;
            // }
            circle = circle == ol.children.length ? 0 : circle;
            // 调用函数
            circleChange();
        }
    });
    // 9. 点击左侧按钮，图片滚动
    arrow_l.addEventListener('click',function() {
        if (flag) {
            flag = false;
            // 如果走到最后一张复制图片， 此时， 我们的ul 要快速复原 left 该为 图片宽度 乘以 索引号
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * focusWidth + 'px';
            }
            num--;
            animate(ul, -num * focusWidth, function() {
                flag = true;
            });
            // 点击左侧按钮，小圆圈跟随一起变化 使用声明变量circle
            circle--;
            // 如果circle < 0 说明第一张图片了，小圆圈要改为第四个小圆圈
            // if (circle < 0) {
            //     circle = ol.children.length - 1;
            // }
            circle = circle < 0 ? ol.children.length - 1 : circle;
            circleChange();
        }
        
    });
    function circleChange() {
        // 先清除其他小圆圈current
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        // 留下当前小圆圈的current类名
        ol.children[circle].className = 'current';
    }
    // 10. 自动播放轮播图
    var timer = setInterval(function() {
        // 手动调用事件
        arrow_r.click();
    }, 3000);
})

 

本站部分文章资源来源于互联网，仅供学习交流，如若要商用，请购买正版！
若不听劝告，网友造成出现一切后果，与本站本人无关
本站有些资源未经测试，请注意网络安全，本站不对下载的资源造成的后果负责
免责声明
作者:昼白
转载请注明来源：https://www.2bcnm.com/3248.htm
THE END
分享
二维码
打赏
海报
【JS实现】轮播图-自动播放，左右按钮点击切换，焦点点击切换
效果 技术点 挺难的，需要不断练习，代码都能看懂，就是思维想不到 实现 主体 <!DOCTYPE html> <html lang="en"> <head> <meta……
<<上一篇
下一篇>>
文章目录
关闭
目 录