轮播图 pink老师案例

啊呼,吖

已于 2023-02-16 12:08:16 修改

阅读量592

点赞数 3

文章标签：前端 javascript html

于 2023-02-10 22:09:54 首次发布

本文链接：https://blog.csdn.net/weixin_72647214/article/details/128977981

版权

功能需求：
1. 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮
2. 点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理.
3. 图片播放的同时,下面小圆圈模块跟随一起变化.
4. 点击小圆圈,可以播放相应图片
5. 不经过轮播图,轮播图也会自动播放图片
6. 鼠标经过轮播图模块,自动播放停止

animate文件

// obj目标对象，target目标位置
// 给不同的元素指定不同的定时器
function animate(obj, targt, callback) {
    // 当我们不断地点击按钮，元素的速度越来越快，因为开启了太多定时器
    // 解决方案，让元素只有一个定时器(清除上一个定时器，只保留当前的定时器)
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // 步长值
        // 把步长值改为正直 ,向上取整
        var step = (targt - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == targt) {
            // 停止定时器
            clearInterval(obj.timer);
            if (callback) {
                callback(); //回调函数
            }
        }
        // 把每次+1这个步长值逐渐变小，步长公式  (目标位置值 - 现在的位置)/10 
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

HTML文件

<!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>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/base.css">
    <script src="js/animate.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
    <div class="focus">
        <a href="javascript:;" class="arrow-l">←</a>
        <a href="javascript:;" class="arrow-r">→</a>
        <ul>
            <li>
                <img src="images/focus1.png" alt="">
            </li>
            <li>
                <img src="images/focus1.png" alt="">
            </li>
            <li>
                <img src="images/focus1.png" alt="">
            </li>
            <li>
                <img src="images/focus1.png" alt="">
            </li>
        </ul>
        <ol class="xiaoyuanquan">
        </ol>
    </div>
</body>

</html>

CSS文件

.focus {
    background-color: pink;
    width: 721px;
    height: 455px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}

.arrow-l,
.arrow-r {
    display: block;
    position: absolute;
    top: 50%;
    width: 20px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: rgba(0, 0, 0, .3);
    z-index: 1;
    color: #fff;
}

.arrow-r {
    right: 0;
}

.focus ul {
    width: 600%;
    position: absolute;
    top: 0;
    left: 0;
    /* 在ul盒子里面动 */
}

.focus ul li {
    float: left;
}

/* 小圆圈边框的位置 */
.xiaoyuanquan {
    position: absolute;
    bottom: 15px;
    left: 50%;
    margin-left: -35px;
    width: 70px;
    height: 13px;

}

/* 小圆圈的大小 位置 颜色 */
.xiaoyuanquan li {
    float: left;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, .9);
    border-radius: 50%;
    margin: 3px;
}

.xiaoyuanquan li.current {
    background-color: red;
}

JS文件

window.addEventListener("load", function () {
    // 获取元素
    var arrow_l = document.querySelector(".arrow-l");
    var arrow_r = document.querySelector(".arrow-r");
    var focus = document.querySelector(".focus");
    var focusWidth = focus.offsetWidth;
    // 鼠标经过focus就显示或隐藏左右按钮
    // mouseenter 鼠标经过事件
    focus.addEventListener("mouseenter", function () {
        arrow_l.style.display = "block";
        arrow_r.style.display = "block";
        clearInterval(timer);
        timer = null;
    });
    // mouseeleave 鼠标离开事件
    focus.addEventListener("mouseleave", function () {
        arrow_l.style.display = "none";
        arrow_r.style.display = "none";
        timer = setInterval(function () {
            arrow_r.click();
        }, 2000);
    });
    // 动态生成小圆圈
    // ul会有很多 要限制在是focus里的ul
    var ul = focus.querySelector("ul");
    var ol = focus.querySelector(".xiaoyuanquan");
    for (var i = 0; i < ul.children.length; i++) {
        // 创建一个小li
        var li = document.createElement("li");
        // 记录小圆圈的索引号
        li.setAttribute('index', i);
        // 小li插入到ol里面
        ol.appendChild(li);
        // 排他思想 生成小圆圈的同时绑定点击事件  load是点击事件
        li.addEventListener("click", function () {
            // 干掉所有  清除所有的小li 清除current
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
                // className 添加类名
            }
            // 留下自己 当前的小li 设置current
            this.className = 'current';
            // 点击小圆圈,移动图片 移动的是ul
            // ul的移动距离 小圆圈的索引号 乘以 图片的宽度
            // 当我们点某个小li时 获得他的索引号
            var index = this.getAttribute('index');
            // 当点击了某个小li就要把这li的索引给num
            num = index;
            // 当点击了某个小li 小圆圈没跟上 bug
            circle = index;
            animate(ul, -index * focusWidth);
        })
    };
    // ol的第一个li设置类名current
    ol.children[0].className = 'current';
    // 克隆第一张图片(li)放到ul 最后面
    // cloneNode() 方法创建节点的拷贝，并返回该副本
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 点击右侧按钮 图片滚动一张
    var num = 0;
    // circle控制小圆圈的播放
    var circle = 0;
    arrow_r.addEventListener("click", function () {
        //如果走到最后一张图片,此时 ul快速复原
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul, -num * focusWidth);
        // 点击右侧 小圆圈跟着变化
        circle++;
        //如果走到最后一张图片,此时 ul快速复原
        if (circle == ol.children.length) {
            circle = 0;
        }
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    });
    // 左侧
    arrow_l.addEventListener("click", function () {
        //如果走到最后一张图片,此时 ul快速复原
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * focusWidth + 'px';
        }
        num--;
        animate(ul, -num * focusWidth);
        // 点击右侧 小圆圈跟着变化
        circle--;
        //到最左后 跳到最右
        if (circle < 0) {
            circle = ol.children.length - 1;
        }
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    });
    // 自动播放
    var timer = setInterval(function () {
        arrow_r.click();
    }, 2000);
});