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

最新推荐文章于 2023-07-16 16:45:03 发布

原创

最新推荐文章于 2023-07-16 16:45:03 发布 · 1.8k 阅读

收录于

当前文章被以下社区和专栏收录：

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

无缝轮播图是本人在学习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>

标签