jq 实现无缝轮播图

最新推荐文章于 2023-06-05 19:20:20 发布

lx_1024

最新推荐文章于 2023-06-05 19:20:20 发布

阅读量3.3k

点赞数 2

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/lx_1024/article/details/79914765

本文介绍了如何使用jq实现无缝轮播图，包括自动播放和手动切换两种方式。提供了详细的HTML、CSS和JS代码示例，核心部分已加注释，方便理解和应用。

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

工作中经常会用到轮播图，这里记载两种轮播图，供大家参考

一、自动播放的无缝轮播图（一张图片占满屏）

首先是HTML，

<div class='bannerCon'>
        <ul class="bannerContainer" id="bannerContainer">
            <li class="banner"><img src="../imgs/banner1.png" alt=""></li>
            <li class="banner"><img src="../imgs/banner2.png" alt=""></li>
            <li class="banner"><img src="../imgs/banner3.png" alt=""></li>
            <li class="banner"><img src="../imgs/banner4.png" alt=""></li>
            <li class="banner"><img src="../imgs/banner5.png" alt="" ></li>
        </ul>
        <div class="bannerTip">
            <ul class="bannerUL" id="bannerTip"></ul>
        </div>
</div>

下面是样式表：

.bannerCon{
    overflow:hidden;
    width:100%;
    position:relative;
}
.bannerContai

最低0.47元/天解锁文章

200万优质内容无限畅学