10--jQuery插件大全-- fullPage

最新推荐文章于 2024-04-04 00:23:38 发布

猪哥哥呀

最新推荐文章于 2024-04-04 00:23:38 发布

阅读量121

点赞数

分类专栏： jquery 文章标签： fullPage 全屏轮播图插件

本文链接：https://blog.csdn.net/weixin_42133396/article/details/102623074

版权

jquery 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

fullPage 全屏滚动插件

- 官网[https://alvarotrigo.com/fullPage/](https://alvarotrigo.com/fullPage/)
- github[https://github.com/alvarotrigo/fullpage.js/](https://github.com/alvarotrigo/fullpage.js/)

全屏轮播图展示如下：

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fullPage</title>
    <link rel="stylesheet" href="../css/fullPage/css/fullpage.css">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/fullPage.js/js/fullpage.min.js"></script>
    <style>
        #fullPage {
            text-align: center;
            color: white;
        }

        h1 {
            font-size: 5em
        }

        #fp-nav ul li a span, .fp-slidesNav ul li a span {
            background: #fff;
        }

        .fp-controlArrow.fp-next {
            right: 50px
        }

        .fp-controlArrow.fp-prev {
            left: 50px
        }

        .nav {
            position: fixed;
            top: 10px;
            right: 30px;
            z-index: 1000;
        }

        .nav a {
            text-decoration: none;
            color: white;
            padding: 10px
        }

        .fp-tableCell > img {
            max-width: 100%
        }
    </style>
</head>
<body>
<div class="nav">
    <a href="#homePage">首页</a>
    <a href="#secondPage">介绍</a>
    <a href="#thirdPage">功能</a>
    <a href="#lastPage">演示</a>
</div>
<div id="fullPage">
    <div class="section">
        <h1>欢迎使用fullPage</h1>
    </div>
    <div class="section">
        <h2>第一页</h2>
    </div>
    <div class="section">
        <div class="slide"><img src="../img/banner_1.jpg" alt=""></div>
        <div class="slide"><img src="../img/banner_2.jpg" alt=""></div>
        <div class="slide"><img src="../img/banner_3.jpg" alt=""></div>
    </div>
    <div class="section"><h2>最后一页</h2></div>
</div>
<script>
    $(function () {
        $("#fullPage").fullpage({
            autoScrolling: true,
            scrollHorizontally: true,
            sectionsColor: ['orange', 'skyblue', 'pink', 'red'],
            navigation: true,
            navigationTooltips: ['第一页', '第二页', '第三页', '最后一页'],
            slidesNavigation: true,
            anchors: ['homePage', 'secondPage', 'thirdPage', 'lastPage'],
        });
    })
</script>
</body>
</html>

猪哥哥呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10--jQuery插件大全-- fullPage

fullPage 全屏滚动插件 - 官网[https://alvarotrigo.com/fullPage/](https://alvarotrigo.com/fullPage/)- github[https://github.com/alvarotrigo/fullpage.js/](https://github.com/alvarotrigo...
复制链接

扫一扫