html+css+jQuery实现无缝轮播图（带左右按钮和小圆点）

最新推荐文章于 2022-05-09 15:14:20 发布

原创

最新推荐文章于 2022-05-09 15:14:20 发布 · 1.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css #html

这篇博客介绍了如何在学习jQuery过程中实现一个无缝轮播图的实践项目。通过在第一张图片前添加最后一张，最后一张后添加第一张，并利用浮动布局，结合jQuery动态调整div的left值，实现了轮播效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无缝轮播图是本人在学习jQuery时练习的一个小项目。

本人是利用在第一张之前放最后一张，在最后一张后放上第一张，然后利用浮动将这些图片并排放在一个大的容器中，在jQuery动画中判断当前图片是否是第一张或者是最后一张，然后通过css选择器来改变当前包裹图片的大的div的left值。

以下是代码部分。

HTML部分：

 <div id="slider">
        <div id="imgs" class="clearfix">
            <a href="#-1"><img src="./img/t4.png" alt=""></a>
            <a href="#0"><img src="./img/t1.png" alt=""></a>
            <a href="#1"><img src="./img/t2.png" alt=""></a>
            <a href="#2"><img src="./img/t3.png" alt=""></a>
            <a href="#3"><img src="./img/t4.png" alt=""></a>
            <a href="#4"><img src="./img/t1.png" alt=""></a>
        </div>
        <div id="arrows">
            <div class="prev"><img src="./img/left.png" alt=""></div>
            <div class="next"><img src="./img/right.png" alt=""></div>
        </div>