jquery 垂直无限轮播

最新推荐文章于 2021-06-28 06:15:09 发布

爱在彩虹

最新推荐文章于 2021-06-28 06:15:09 发布

阅读量4k

点赞数

分类专栏： javascript 文章标签： javascript vertical

本文链接：https://blog.csdn.net/u011113654/article/details/51282770

版权

这篇博客介绍了如何利用jQuery来创建一个垂直方向的无限轮播效果，内容包括HTML节点设置、CSS样式定义、jQuery的准备工作以及核心的JavaScript代码实现。

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

javascript垂直轮播，依赖于jquery实现的，并且首尾无缝衔接。原理很简单，就不讲述了，直接贴源码。

1.HTML节点

<div class="banner_group">
        <ul id="banner">
            <!-- 缓存末项,实现滑动到最开始后,无限轮播 -->
            <li style="background-color: chartreuse">第四页</li>
            <li style="background-color: #f6894d">第一页</li>
            <li style="background-color: royalblue">第二页</li>
            <li style="background-color: red">第三页</li>
            <li style="background-color: chartreuse">第四页</li>
            <!-- 缓存首项,实现滑动到最后过后,无限轮播 -->
            <li style="background-color: #f6894d">第一页</li>
        </ul>
        <div class="scrollPageBtn">
            <div style="width: 100%;height: 100%;position: relative;">