完整无缝轮播图的原理和实现

最新推荐文章于 2024-02-23 11:32:18 发布

GGGGGG.enough

最新推荐文章于 2024-02-23 11:32:18 发布

阅读量7.4k

点赞数 4

文章标签： javascript html html5

本文链接：https://blog.csdn.net/ggbee_/article/details/107283784

版权

无缝轮播图

原理：
1. 首先需要一个装所有图片的盒子。然后通过移动装图片的盒子来使图片显示出来。
2. 需要封装一个移动框架，在图片移动时有时间缓冲。
3. 如果需要感觉图片移动时连贯的话，就需要将第一张图片复制一张到最后面，然后当图片切换到最后一张图片时候，立马将图片跳转至第一张，就会给我们一种图片是连贯的错觉。
4. 需要用到的知识点：定位，浮动，动画，定时器

2.实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12.无缝轮播图</title> 
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        #box {
            position: relative;
            width: 520px;
            height: 280px;
            margin: 50px auto;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        #box ul {
            position: absolute;
            left: 0;
            top: 0;
            height: 280px;
            width: 5000px;
        }

        #box ul li {
            float: left;
            width: 520px;
            height: 280px;
        }

        #leftBtn,
        #rightBtn {
            position: absolute;
            top: 90px;
            width: 45px;
            height: 100px;
            background: url('img/sprite.png') no-repeat;
        }

        #rightBtn {
            right: 0;
            background-position: -45px 0;
        }

        #box p {
            position: absolute;
            left: 0;
            bottom: 6px;
            width: 100%;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }

        #box p span {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: #ccc;
            border-radius: 50%;
            margin: 0 3px;
            cursor: pointer;
        }

        #box p span.active {
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
        </ul>
        <a href="javascript:;" id="leftBtn"></a>
        <a href="javascript:;" id="rightBtn"></a>
        <p>
            <span class="active"></span>
            <span></span>
            <span></span>
        </p>
    </div>

    <script src="js/move.js"></script>
    <script>
        // 获取元素
        var box = document.querySelector('#box');
        var imgbox = document.querySelector('ul');
        var lis = box.querySelectorAll('li');

        // 获取按钮
        var leftBtn = document.getElementById('leftBtn');
        var rightBtn = document.getElementById('rightBtn');

        // 获取span 小圆点按钮
        var spans = box.querySelectorAll('span');
        // 获取一个图片的宽度
        var imgW = lis[0].offsetWidth;
        // 记录第几张图片

        var count = 0;
        var timer = null;

        var flag = true;//让轮播动画完成，才开启下一个轮播图片

        // 无缝链接  克隆第一个节点 
        imgbox.appendChild(lis[0].cloneNode(true));


        // 实现每3s切换一个图片
        timer = setInterval(auto, 2000);

        // 当鼠标移入 定时器停止，移除开启定时器
        box.onmouseover = function () {
            clearInterval(timer);
        }
        box.onmouseout = function () {
            timer = setInterval(auto, 2000);
        }

        // 点击小圆点切换图片
        for (var i = 0; i < spans.length; i++) {
            spans[i].index = i;
            spans[i].onclick = function () {
                count = this.index - 1;
                auto();
            }
        }

        // 左右按钮切换
        rightBtn.onclick = function () {
            clearInterval(timer);
            if (flag) {
                flag = false;
                auto();
            }
        }

        leftBtn.onclick = function () {
            clearInterval(timer);
            if (flag) {
                if (count == 0) {
                    count = lis.length;
                    imgbox.style.left = -count * imgW + 'px';
                }
                count--;
                flag = false;
                change();
            }
        }

        // 轮播移动函数
        function auto() {
            if (count === lis.length) {
                count = 0;
                imgbox.style.left = 0;
            }
            count++;
            change();
        }

        // 动态的 图片切换
        function change() {

            // imgbox.style.left = -(imgW * count) + 'px';  
            move(imgbox, { left: -(imgW * count) }, function () {
                flag = true;
            });
            // 小圆点的切换
            for (var i = 0; i < spans.length; i++) {
                // 清空原有样式
                spans[i].className = '';

                // 给当前图片对应的小圆点 设置样式  
                if (count === lis.length) {
                    spans[0].className = 'active';
                } else {

                    spans[count].className = 'active';
                }
            }
        }
    </script>
</body>

</html>

其中按钮设置了需要动画播放完成之后，才可以切换下一张图片，这样就可以使播放比较连贯。

这里还只是静态的，后续也可以通过从后端获取图片资源，动态的创建标签和类。然后实现图片轮播。

欢迎一起讨论^_^

GGGGGG.enough

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
4
评论
完整无缝轮播图的原理和实现

无缝轮播图原理：首先需要一个装所有图片的盒子。然后通过移动装图片的盒子来使图片显示出来。需要封装一个移动框架，在图片移动时有时间缓冲。如果需要感觉图片移动时连贯的话，就需要将第一张图片复制一张到最后面，然后当图片切换到最后一张图片时候，立马将图片跳转至第一张，就会给我们一种图片是连贯的错觉。需要用到的知识点：定位，浮动，动画，定时器 2.实现<!DOCTYPE html><html lang="en"><head> .
复制链接

扫一扫