JS 无缝轮播图

最新推荐文章于 2024-04-08 16:26:29 发布

weixin_44809440

最新推荐文章于 2024-04-08 16:26:29 发布

阅读量55

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_44809440/article/details/115767275

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了一个使用JavaScript编写的轮播图组件，包括图片平滑移动、鼠标悬停控制、左右按钮交互以及小圆点同步切换。通过定时器和CSS调整，实现了图片无缝滚动，并且小圆点能准确反映当前显示的图片位置。

摘要由CSDN通过智能技术生成

JS 无缝轮播
JS 脚本

function moveAnimate2(ele, target) {
        // 清除定时器
        clearInterval(ele.interId);
        ele.interId = setInterval(function() {
            if (ele.offsetLeft == target) {
                clearInterval(ele.interId);
                // 向右走
            } else {
                // offsetLeft 是一个整数，表示向左偏移的像素值。
                var smallstep = (target - ele.offsetLeft) / 10;
                // 向右走(最后一步为1)和向左走(最后一步为-1)
                smallstep = smallstep > 0 ? Math.ceil(smallstep) : Math.floor(smallstep);
                ele.style.left = ele.offsetLeft + smallstep + 'px';
            }
        }, 20);
    }

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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style-type: none;
        }
        /* 最大的盒子-来确定轮播图的位置 */
        
        .carousel {
            /* 定位 */
            position: relative;
            width: 750px;
            height: 360px;
            border: 1px solid orange;
            margin: 50px auto;
        }
        /* 图片放置内容的盒子 */
        
        .cal-list {
            width: 750px;
            height: 360px;
            /* 图片的盒子要给定位****** */
            position: relative;
            /* overflow: hidden; */
        }
        
        .cal-list .viewpage {
            position: absolute;
            width: 600%;
            left: 0;
            top: 0;
        }
        
        .cal-list .viewpage li {
            float: left;
        }
        /* 小圆点大盒子 */
        
        .circle-list {
            width: 100px;
            position: absolute;
            left: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            bottom: 30px;
            margin-left: -50px;
            padding: 5px;
            border-radius: 15px;
        }
        
        .circle {
            float: left;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #fff;
            margin-left: 7px;
        }
        
        .active {
            background-color: red;
        }
        
        .prev,
        .next {
            width: 30px;
            height: 60px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.3);
            font-size: 30px;
            position: absolute;
            top: 40%;
            line-height: 60px;
            border-radius: 0px 25px 25px 0;
            text-align: center;
            display: none;
        }
        
        .next {
            right: 0;
            border-radius: 25px 0px 0px 25px;
        }
    </style>
</head>

<body>
    <!-- 轮播图最大的盒子 -->
    <div class="carousel">
        <!-- 放置图片的内容 -->
        <div class="cal-list">
            <ul class="viewpage">
                <li><img src="images/pic1.jpg" alt=""></li>
                <li><img src="images/pic2.jpg" alt=""></li>
                <li><img src="images/pic3.jpg" alt=""></li>
                <li><img src="images/pic4.jpg" alt=""></li>
                <li><img src="images/pic5.jpg" alt=""></li>
                <li><img src="images/pic1.jpg" alt=""></li>
            </ul>
            <!-- 左右按钮 -->
            <div class="prev">&lt;</div>
            <div class="next">&gt;</div>
        </div>
        <!-- 小圆点 -->
        <div class="circle-list">
            <span class="circle active"></span>
            <span class="circle"></span>
            <span class="circle"></span>
            <span class="circle"></span>
            <span class="circle"></span>
        </div>
    </div>
    <script src="js/animateUntil.js"></script>
    <script>
        // 获取元素
        var viewpage = document.getElementsByClassName('viewpage')[0];
        var circles = document.getElementsByClassName('circle');
        var calList = document.getElementsByClassName('cal-list')[0];
        // 左边按钮
        var prev = document.getElementsByClassName('prev')[0];
        // 右边按钮
        var next = document.getElementsByClassName('next')[0];
        // 1.鼠标放在图片区域时,显示左右按钮,自动轮播停止
        // 2.鼠标离开图片区域时,左右按钮消失,自动轮播开始
        // 3.给右边按钮绑定事件,小圆点跟随图片变化而变化
        // 4.给左边按钮绑定事件,小圆点跟随图片变化而变化
        // 5.自动轮播调用右边按钮事件即可
        // 6.焦点轮播
        // 开始代码
        // 排他的函数封装
        function backColor(ele) {
            // 排他使所有小圆点先变成白色
            for (var j = 0; j < ele.length; j++) {
                ele[j].className = 'circle';
            };
        };
        // 1.鼠标放在图片区域时,显示左右按钮,自动轮播停止
        calList.onmouseover = function() {
            // 左右按钮显示
            prev.style.display = "block";
            next.style.display = "block";
            // 轮播停止-----------
            clearInterval(viewpage.autoId);
        };
        // 2.鼠标离开图片区域时,左右按钮消失,自动轮播开始
        calList.onmouseout = function() {
            // 左右按钮显示
            prev.style.display = "none";
            next.style.display = "none";
            // 轮播开始-----------
            autoplay();
        };
        // 3.给右边按钮绑定事件,小圆点跟随图片变化而变化
        // 由于图片和小圆点的个数不相同-所以需要2个计数器来表示各自的当前active状态
        // 小圆点计数器
        var flag = 0;
        // 图片当前走的target的位置的计数
        var count = 0;
        next.onclick = function() {
            flag++;
            count++;
            // 设置小圆点的颜色
            // 判定flag的值,是否需要回归初始
            if (flag == circles.length) {
                flag = 0;
            };
            // 判定count的值何时回归初始
            if (count == viewpage.children.length) {
                // 拉回到left为0
                viewpage.style.left = 0;
                // 走到第二张
                count = 1;
            };
            // 先排他,再设置颜色
            backColor(circles);
            circles[flag].className = "circle active";
            // 2.移动到当前位置的图片--使ul往左移动
            var target = count * (-750);
            moveAnimate2(viewpage, target);
        };
        // 4.给左边按钮绑定事件,小圆点跟随图片变化而变化
        prev.onclick = function() {
            // 判定是否是第一张图片
            if (count == 0) {
                count = viewpage.children.length - 1;
                viewpage.style.left = count * (-750) + 'px';
            }
            flag--;
            count--;
            // 是否是第一个小圆点
            if (flag < 0) {
                flag = circles.length - 1;
            };
            // 先排他,再设置颜色
            backColor(circles);
            circles[flag].className = "circle active";
            // 2.移动到当前位置的图片--使ul往左移动
            var target = count * (-750);
            moveAnimate2(viewpage, target);
        };
        // 5.自动轮播调用右边按钮事件即可
        function autoplay() {
            viewpage.autoId = setInterval(function() {
                // 调用一下右边按钮绑定的事件
                next.onclick();
            }, 3000);
        };
        autoplay();
        // 6.焦点轮播
        for (var i = 0; i < circles.length; i++) {
            // 保存i值
            circles[i].index = i;
            // 绑定事件
            circles[i].onmouseover = function() {
                // 设置同步器
                flag = this.index;
                count = this.index;
                // 排他使所有小圆点先变成白色
                // 先排他,再设置颜色
                backColor(circles);
                // 1.使小圆点变色
                this.className = 'circle active';
                // 2.移动到当前位置的图片--使ul往左移动
                var target = this.index * (-750);
                //调用JS脚本文件
                moveAnimate2(viewpage, target);
            }
        }
    </script>
</body>

</html>

weixin_44809440

关注

0
点赞
踩
0

收藏

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

JS 无缝轮播JS 脚本function moveAnimate2(ele, target) { // 清除定时器 clearInterval(ele.interId); ele.interId = setInterval(function() { if (ele.offsetLeft == target) { clearInterval(ele.interId); /
复制链接

扫一扫