JS轮播图

最新推荐文章于 2024-06-17 15:29:34 发布

棋炜的小宝贝

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量128

点赞数

分类专栏： animate 轮播图文章标签： js

本文链接：https://blog.csdn.net/XWen_ING/article/details/108635697

版权

animate 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

轮播图

2 篇文章 0 订阅

订阅专栏

JS轮播图

html+css代码

<!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;
        }

        ul,
        li {
            list-style: none;
        }

        .carousel {
            position: relative;
            width: 600px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
        }

        ul.imgList {
            position: absolute;
            width: 41000px;
            height: 400px;
        }

        ul.imgList li {
            float: left;
        }

        .btns {
            /* display: none; */
            width: 600px;
            height: 100px;
            position: absolute;
            top: 50%;
            margin-top: -50px;
        }

        .btns .leftBtn {
            float: left;
        }

        .btns .rightBtn {
            float: right;
        }

        .btns span {
            width: 40px;
            line-height: 100px;
            text-align: center;
            font-size: 30px;
            color: white;
            cursor: pointer;
        }

        .cirList {
            position: absolute;
            bottom: 10px;
            left: 140px;
            right: 140px;
            height: 30px;
            display: flex;
            justify-content: space-evenly;
        }

        .cirList li {
            width: 20px;
            height: 20px;
            background-color: orange;
            border-radius: 50%;
        }

        .cirList li.active {
            background-color: red;
        }
    </style>

</head>

<body>
    <div id="carousel" class="carousel">
        <ul class="imgList">
            <li><img src="images/1.jpeg" /></li>
            <li><img src="images/2.jpeg" /></li>
            <li><img src="images/3.jpeg" /></li>
            <li><img src="images/4.jpeg" /></li>
            <li><img src="images/5.jpeg" /></li>
            <li><img src="images/6.jpeg" /></li>
            <li><img src="images/1.jpeg" /></li>
        </ul>
        <div class="btns">
            <span class="leftBtn">&lt;</span>
            <span class="rightBtn">&gt;</span>
        </div>
        <ul class="cirList">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script src="animate.js"></script>
    <script>
        // 1 获取元素
        let rightBtn = document.querySelector(".rightBtn");
        let leftBtn = document.querySelector(".leftBtn");
        let imgList = document.querySelector('.imgList');
        let listLength = imgList.getElementsByTagName("li").length;
        let cirs = Array.from(document.querySelectorAll(".cirList li"));
        let carousel = document.getElementById('carousel');
        // 2 添加事件
        // 设定一个信号量 累计鼠标点了右按钮几次
        let count = 0;
        // 设置一把锁 
        let lock = true;
        let rightHandler = () => {
            // 判断
            if (!lock) {
                return;
            }
            // 当为真时 下面的代码会被执行 执行过程中 应当不允许点击第二次
            lock = false;
            // 点一次就加一次
            count++;
            // 将ul元素 向左移动1个图片的距离
            animate(imgList, { left: -600 * count }, 1000, () => {
                // 判断是否到最后的猫腻图了 
                if (count >= listLength - 1) {
                    console.log("到了最后那张猫腻图");
                    // 将定位拉回0 
                    imgList.style.left = 0;
                    // 将count归0
                    count = 0;
                }
                // 每次动画结束 都要开锁
                lock = true;
            });
            change();
        }
        rightBtn.addEventListener("click", rightHandler);


        // 左按钮点击事件
        leftBtn.addEventListener("click", () => {
            if (!lock) {
                return;
            }
            lock = false;
            // 当点击左按钮的时候 让count-- 
            count--;
            // 判断count是否合法
            if (count < 0) {
                // 修正count值
                count = listLength - 1;
                // 将imgList直接拽到猫腻图那
                imgList.style.left = -count * 600 + "px";
                count--;
            }
            animate(imgList, {left: count * -600}, 1000, function() {
                lock = true;
            });
            change();
        });


        // 小圆点按钮 要有点击事件
        cirs.forEach(function(value, index) {
            value.addEventListener("click", function() {
                if (!lock) {
                    return;
                }
                lock = false;
                // 切换图片 其实就是让imgList运动到对应的图片 就是修改count
                count = index;
                animate(imgList, {left: count * -600}, 1000, function() {
                    lock = true;
                });

                // 小圆点更换样式
                change();
            });
        });

        // 封装一个函数
        function change() {
            // 清空所有的小圆点样式
            cirs.forEach(function(value) {
                value.className = "";
            });
            // 单独给count对应的小圆点添加
            // if (count === listLength - 1) {
            //     cirs[0].className = "active";
            // } else {
            //     cirs[count].className = "active";
            // }
            // 简化
            let a = count === listLength - 1 ?  0 : count;
            cirs[a].className = "active";
        }



        // 自动轮播
        let timer = setInterval(function() {
            rightHandler();
        }, 10000);

        // 绑定鼠标进入事件
        carousel.addEventListener("mouseenter", function() {
            clearInterval(timer);
            console.log(leftBtn.parentNode)
            leftBtn.parentNode.style.display = "block";
        });
        // 绑定鼠标离开事件
        carousel.addEventListener("mouseleave", function() {
            leftBtn.parentNode.style.display = "none";
            timer = setInterval(function() {
                rightHandler();
            }, 10000);
        });

    </script>

</body>

</html>

JS代码

function animate(ele, obj, duration, callback) {
    // 定义一个固定的时间间隔
    let interval = 20;
    // 知道起点
    let startObj = {};
    for (let i in obj) {
        startObj[i] = parseInt(getComputedStyle(ele)[i]);
    }
    // 知道总次数
    let allCount = duration / interval;
    // 定义变量记录次数
    let count = 0;
    let timer = setInterval(function () {
        count++;
        // 循环改变元素的属性
        for (let i in obj) {
            let result = startObj[i] + (obj[i] - startObj[i]) / allCount * count;
            ele.style[i] = (i.toLowerCase() === "opacity") ? result : (result + "px");
        }
        // 停止
        if (count >= allCount) {
            clearInterval(timer);
            callback && callback(); // 等价于 if (callback) {callback()}
        }
    }, interval)
}

棋炜的小宝贝

关注

0
点赞
踩
0

收藏

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

JS轮播图html+css代码<!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>
复制链接

扫一扫

专栏目录