jq轮播图2

最新推荐文章于 2019-11-29 21:14:32 发布

dyx19971026

最新推荐文章于 2019-11-29 21:14:32 发布

阅读量209

点赞数 2

分类专栏： JS 文章标签： jq轮播图2

本文链接：https://blog.csdn.net/dyx19971026/article/details/100631252

版权

本文介绍了一种使用jQuery实现无缝轮播图的方法，通过在原始图片后面复制一组图片，设置初始索引为复制组的第一张，当滚动到复制组的最后一张时，将索引重置为原始组的第一张，以此实现无缝切换效果。同时，文章讨论了点击左按钮时如何处理索引，确保无缝滚动的实现。

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

今天续着上一期的来给大家讲另外一种方法的轮播图
这种方法可以实现无缝轮播，原理就是我们在自己预先想要设置轮播的那一组照片后边，用jq语言在另外加上一组相同的照片，相当于现在的长度就是两组照片的长度，我们将初始的图片索引值就先定在我们复制的第一张图片上，就是复1的位置，当我们一次开始向右边滚动的时候，到第复5的时候，在执行完过渡动画后，将其定位为原5，然后再一次循环，因为复5和原5是一样的通过这样实现了无缝切换滚动。
还有一种情况我们要考虑，当我们点击左边按钮的时候，我们要考虑到原1的时候，我们要将其定位为复1，同样的道理都是利用相同的图片原因实现的无缝滚动，接下来给大家直接上代码，一例胜千言

在这里插入图片描述

<style>
        .tu {
            position: relative;
            width: 600px;
            height: 400px;
            overflow: hidden;
            margin: 0 auto;
        }

        .pian {
            position: absolute;
            width: 3600px;
            height: 400px;
        }

        .pic {