JavaScript 网页轮播图

墨问莫问645

已于 2022-08-12 17:15:05 修改

阅读量356

点赞数

文章标签： javascript 前端 html css

于 2022-08-12 16:57:09 首次发布

本文链接：https://blog.csdn.net/qq_64133626/article/details/126306772

版权

轮播图也称为焦点图，是网页中比较常见的网页特效。

功能需求：

鼠标经过轮播图模块时，左右按钮显示，离开则隐藏
点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理
图片播放的同时，下面的小圆圈儿跟随图片一起变化
点击小圆圈儿，可以播放相应图片
鼠标不经过轮播图，轮播图也自动播放
鼠标经过轮播图模块时，停止自动播放

效果图：

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>轮播图</title>
    <script src="../js/animate.js"></script>
    <script src="../js/carousel.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        .focus {
            margin: 50px auto;
            position: relative;
            width: 720px;
            height: 455px;
            overflow: hidden;
        }
        
        .focus ul {
            /* 加定位才能使用动画函数 */
            position: absolute;
            top: 0;
            left: 0;
            width: 500%;
        }
        
        .focus ul li {
            float: left;
        }
        
        .focus ul li a img {
            width: 720px;
            height: 455px;
        }
        
        .arrow-l,
        .arrow-r {
            display: none;
            position: absolute;
            top: 50%;
            width: 24px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: rgba(0, 0, 0, .5);
            color: #fff;
            z-index: 1;
        }
        
        .arrow-l:hover,
        .arrow-r:hover {
            color: orangered;
        }
        
        .arrow-r {
            border-bottom-left-radius: 10px;
            border-top-left-radius: 10px;
            right: 0;
        }
        
        .arrow-l {
            border-bottom-right-radius: 10px;
            border-top-right-radius: 10px;
            left: 0;
        }
        
        .circle {
            position: absolute;
            bottom: 10px;
            left: 270px;
            width: 180px;
            height: 15px;
        }
        
        .circle li {
            width: 20px;
            height: 2px;
            border: 1px solid #fff;
            border-radius: 1px;
            display: inline-block;
            margin-left: 5px;
            cursor: pointer;
        }
        
        .circle .selected,
        .circle li:hover {
            background-color: #fff;
        }
        
        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="focus">
        <a href="javascript:;" class="arrow-l">&lt;</a>
        <a href="javascript:;" class="arrow-r">&gt;</a>
        <ul>
            <li>
                <a href="javascript:;"><img src="../images/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="../images/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="../images/3.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="../images/4.jpg" alt=""></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);
            // 回调函数
            callback && callback();
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

carousel.js:

window.addEventListener('load', function() {
    // 获取元素
    var left = document.querySelector('.arrow-l');
    var right = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');

    var focusWidth = focus.offsetWidth;

    // 左右按钮的显隐
    focus.addEventListener('mouseenter', function() {
        left.style.display = 'block';
        right.style.display = 'block';
        // 清除定时器变量
        clearInterval(timer);
        timer = null;
    })
    focus.addEventListener('mouseleave', function() {
        left.style.display = 'none';
        right.style.display = 'none';
        timer = setInterval(function() {
            //手动调用点击事件
            right.click();
        }, 2000);
    })

    var num = 0;
    var cir = 0;
    // 动态生成小圆圈儿
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('ol');

    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li'); // 创建 li 
        li.setAttribute('index', i); // 自定义索引号
        ol.appendChild(li); // 把 li 插入到 ol
        // 排他思想 绑定点击事件
        li.addEventListener('click', function() {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'selected';

            // 点击小圆圈儿，移动图片 即 ul 
            var index = this.getAttribute('index'); // 获取索引号
            // 当点击 li 后将其索引号给 num
            num = index;
            // 当点击 li 后将其索引号给 cir
            cir = index;
            console.log(focusWidth);
            console.log(index);

            animate(ul, -index * focusWidth);
        })
    }
    ol.children[0].className = 'selected';
    console.log(ol.children[0]);

    // 克隆第一张图片 li  放在 ul 的最后
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);

    // 按钮功能实现

    // 节流阀
    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, -num * focusWidth, function() {
                flag = true; // 打开节流阀
            });

            // 小圆圈跟随图片变化
            cir++;
            if (cir == ol.children.length) {
                cir = 0;
            }

            // 调用函数
            cirChange();
        }
    });

    left.addEventListener('click', function() {
        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * focusWidth + 'px';
            }
            num--;
            animate(ul, -num * focusWidth, function() {
                flag = true;
            });

            cir--;
            // if (cir < 0) {
            //     cir == ol.children.length - 1;
            // }
            cir = cir < 0 ? ol.children.length - 1 : cir;

            // 调用函数
            cirChange();

        }
    });

    // 封装函数 排他思想
    function cirChange() {
        // 先清除其余小圆圈的 selected 类名
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        // 留下当前的小圆圈的 selected 类名
        ol.children[cir].className = 'selected';
    }

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

节流阀

作用：防止轮播图按钮连续点击造成播放过快。

节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。 

核心实现思路： 利用回调函数，添加一个变量来控制，锁住函数和解锁函数。

语法：

var flag= true; // 开始设置一个变量
if(flag){
    flag = false; do something
}    // 关闭水龙头
利用回调函数动画执行完毕， flag = true    // 打开水龙头

墨问莫问645

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫