用jQuery实现带滑动效果的轮播图

最新推荐文章于 2022-06-20 21:03:47 发布

陆言川

最新推荐文章于 2022-06-20 21:03:47 发布

阅读量1.6k

点赞数 1

分类专栏： java 文章标签： JavaScript jQuery 前端轮播图

本文链接：https://blog.csdn.net/weixin_44195331/article/details/101172678

版权

本文介绍如何利用jQuery实现带滑动效果的自动轮播图。关键在于将第一张和最后一张图片复制并放置在图片序列的两端。当滑动到实际上的最后一张时，无缝过渡显示第一张图片，通过定位调整实现平滑回转，确保动画执行完毕后进行切换，从而营造出连续的轮播体验。

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

实现带滑动效果的自动轮播图的思想就是放图片的时候把原本第一张和最后一张分别在最后和开始在放一张，当滑动到实际的最后一张是，显示的是第一张的内容，其实是整个图片集的最后一张，在此时通过改变位置，让图片快速回到第一张，当然这个要在动画执行完毕后在执行，就可以实现带滑动效果的轮播效果

<body>
<div id="container">
  <div id="list" style="left: -600px;">
    <img src="img/5.jpg" alt="5"/>
    <img src="img/1.jpg" alt="1"/>
    <img src="img/2.jpg" alt="2"/>
    <img src="img/3.jpg" alt="3"/>
    <img src="img/4.jpg" alt="4"/>
    <img src="img/5.jpg" alt="5"/>
    <img src="img/1.jpg" alt="1"/>
  </div>
  <div id="pointsDiv">
    <span index="1" class="on"></span>
    <span inde