手写jQuery轮播图（无缝回到第一张）

最新推荐文章于 2024-07-17 14:33:27 发布

想搞全栈的前端

最新推荐文章于 2024-07-17 14:33:27 发布

阅读量3.4k

点赞数 4

分类专栏： jQuery 文章标签： jQuery 轮播图无缝

本文链接：https://blog.csdn.net/qq_42068550/article/details/93726004

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

轮播图是学习前端必须会的，面试的时候经常会面试到。轮播图的难点在于最后一张到第一张怎么实现无缝滚动，这是一种思维方式的转变。

原理

我们以3张的轮播图为例讲解。

如下图，制作三张轮播图时需要放4张图片，第四张和第一张一样。
在这里插入图片描述
在如何从第四张1转到2呢？
在我们从3移到1后，我们需要把第4张变成第一张。惯性思维会认为需要从第四张1移动到第一张1。其实对计算机而言，并没有这个过程，加上移动只是为了是我们看的舒服，我们直接设置外部ul的偏移量变成0，就变成第一张了，因为1，4两张图片一样所以看不出来变化。
这一部分代码：

     function start() {
                timer = setInterval(() => {
                //将图片的right改为0则成了第一张图片，因为1，4两张图片一样所以看不出来变化
                    num++
                    if (num >= 7) {
                        num = 1;
                        ul.css({
                            right: 0
                        });
                    }
                    //然后在播放就是第一张到第二张了
                    ul.animate({
                        "right": width * num
                    })
      }

在这里插入图片描述

Demo

为了方便，这里直接将css,js代码写在了html中，注意图片路径和jq路径需要改成自己的。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../../js/jquery-1.11.3.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        .wrapper {
            position: relative;
            width: 500px;
            margin: 30px auto;
        }

        .top {
            width: 500px;
            overflow: hidden;
        }

        li {
            list-style-type: none;
            float: left;
            white-space: nowrap;
        }

        .imgs {
            width: 4000px;
            position: relative;
        }

        .center .btn {
            position: absolute;
            top: 140px;
            color: white;
            background-color: black;
            opacity: 0.7;
            width: 40px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }

        .center .btn.left {
            left: 0;
        }

        .center .btn.right {
            right: 0;
        }

        .buttom .move {
            position: absolute;
            bottom: 10px;
            transform: translateX(-50%);
            left: 50%;
        }

        .buttom .move li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: skyblue;
            text-align: center;
            margin-left: 3px;
        }

        .bg {
            background-color: red !important;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div class="wrapper">
        <div class="top">
            <ul class="imgs">
                <li><img src="../image/1.jpg" alt="" width="500px" height="333"></li>
                <li><img src="../image/2.jpg" alt="" width="500px" height="333"></li>
                <li><img src="../image/3.jpg" alt="" width="500px" height="333"></li>
                <li><img src="../image/4.jpg" alt="" width="500px" height="333"></li>
                <li><img src="../image/5.jpg" alt="" width="500px" height="333"></li>
                <li><img src="../image/6.jpg" alt="" width="500px" height="333"></li>
                <li><img src="../image/1.jpg" alt="" width="500px" height="333"></li>
            </ul>
        </div>
        <div class="center">
            <div class="btn left">
                <</div> <div class="btn right">>
            </div>
        </div>
        <div class="buttom">
            <ul class="move">
                <li class="bg"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            ul = $('.wrapper .top .imgs')
            var width = 500
            var num = 1
            start()

            // 鼠标放在下方原点上触发事件
            $('.buttom .move li').hover(function () {
                //清除ul所有动画队列
                ul.stop(true, true)
                //清楚定时器
                clearInterval(timer)
                //添加背景色
                $(this).addClass('bg').siblings().removeClass('bg')
                //图片移到相对应
                num = $(this).index()
                ul.animate({
                    "right": width * num
                })
            }, function () {
                //开始轮播
                start()
                $(this).removeClass('bg')
            })

            //下一张
            $('.center .right').on('click', function () {
                ul.stop(true, true)
                clearInterval(timer)
                num++;
                if (num >= 7) {
                    num = 1;
                    ul.css({
                        right: 0
                    });
                }

                ul.animate({
                    "right": width * num
                })

                color()
                start()
            })

            //下一张
            $('.center .left').on('click', function () {
                ul.stop(true, true)
                clearInterval(timer)
                num--;
                if (num <= -1) {
                    num = 5;
                    ul.css({
                        right: 3000
                    });
                }

                ul.animate({
                    "right": width * num
                })

                color()
                start()
            })

            // 下方原点背景色
            function color() {
                if (num === 6) {
                    $('.buttom .move li').eq(0).addClass('bg').siblings().removeClass('bg')
                } else {
                    $('.buttom .move li').eq(num).addClass('bg').siblings().removeClass('bg')
                }
            }

            // 自动轮播
            function start() {
                timer = setInterval(() => {
                    num++
                    if (num >= 7) {
                        num = 1;
                        ul.css({
                            right: 0
                        });
                    }
                    ul.animate({
                        "right": width * num
                    })
                    if (num === 6) {
                        $('.buttom .move li').eq(0).addClass('bg').siblings().removeClass('bg')
                    } else {
                        $('.buttom .move li').eq(num).addClass('bg').siblings().removeClass('bg')
                    }

                }, 1000);
            }
        })
    </script>
</body>

</html>