素材牛VIP会员

jQuery fullpage响应式全屏滚动

 所属分类:网页特效-UI/布局/瀑布流,触屏/拖拽/下拉,独立部件

 浏览:612次-  下载:3次-  评论:1次-  更新时间:2019-03-19
jQuery fullpage响应式全屏滚动兼容IE10
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免积分下载!   充值积分   充值会员   更多说明»
素材描述:瀑布流全屏滚动,绚丽的banner切换效果下载。

详细介绍

全屏滚动流媒体,引入,

<link rel="stylesheet" href="css/jquery.fullPage.css" />
<script src="js/jquery.fullPage.min.js"></script>

在执行$('#index_main').fullpage({

'navigation': true,
slidesNavigation: true,
    controlArrows: false,
    continuousHorizontal: true,
    scrollingSpeed: 1000,
    showActiveTooltip: true,
    anchors: ['hero', 'one', 'two', 'three'],
    loopHorizontal: true,
    afterLoad: function(anchorLink, index) {
        if (index == 1) {
            $('header').removeClass('on');
        }
        if (index == 2) {
            $('header').addClass('on');
            $('.section2 h3').addClass('animated fadeInUp').css('animation-delay', '.1s');
        }
        if (index == 3) {
            $('header').addClass('on');
            $('.section3 h3').addClass('animated fadeInUp').css('animation-delay', '.1s');
        }
        if (index == 4) {
            $('header').addClass('on');
            $('.section4 h3').addClass('animated fadeInUp').css('animation-delay', '.1s');
        }
    },
    onLeave: function(index, direction) {
    }
})

文件目录结构

  • css
    • ┝ animate.css
    • ┝ head.css
    • ┝ index.css
    • ┝ jquery.fullPage.css
    • ┝ reset.css
    • ┝ slick.css
    • ┝ swiper.min.css
  • image
    • ┝ 2.jpg
    • ┝ 3.jpg
    • ┝ banner1.jpg
    • ┝ banner2.jpg
    • ┝ banner3.jpg
    • ┝ banner4.jpg
    • ┝ ban_next.png
    • ┝ ban_next_hover.png
    • ┝ ban_prev.png
    • ┝ ban_prev_hover.png
    • ┝ closed.png
    • ┝ logo.png
    • ┝ logo2.jpg
  • ┝ index.html
  • js
    • ┝ index.js
    • ┝ index_slick.js
    • ┝ jquery.fullPage.js
    • ┝ jquery.fullPage.min.js
    • ┝ jquery.min.js
    • ┝ slick.js
    • ┝ swiper.min.js

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

ka***88  
2019年07月15日

这个不错!!

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:3
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)