文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在fullpageJS中创建自动播放滑块

问如何在fullpageJS中创建自动播放滑块
EN

Stack Overflow用户

提问于 2018-04-24 15:20:32

回答 1查看 378关注 0票数 0

我一直在尝试/学习使用fullpagejs来创建一个网站，但我在创建自动播放滑块时遇到了问题。我只能创建水平滚动，这并不是我真正想要在这里实现的。如何在不使用水平滚动的情况下实现这一点，有什么帮助吗？

大家好，我一直在尝试/学习使用fullpagejs来创建一个网站，但我在创建自动播放滑块时遇到了问题。我只能创建水平滚动，这并不是我真正想要在这里实现的。如何在不使用水平滚动的情况下实现这一点，有什么帮助吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<!--Custom script -->
<script type="text/javascript" src="js/fullpage.js"></script>

        <script type="text/javascript">
            window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
            ga('create','UA-XXXXX-Y','auto');ga('send','pageview')

            $(document).ready(function(){

//  $('#fullpage').fullpage({
//     sectionSelector: '.vertical-scrolling',
//     slideSelector: '.horizontal-scrolling',
//     controlArrows: false
//     // more options here
// });


// variables
var $header_top = $('.header-top');
var $nav = $('nav');


// toggle menu 
$header_top.find('a').on('click', function() {
  $(this).parent().toggleClass('open-menu');
});

// fullpage customization
$('#fullpage').fullpage({
  sectionsColor: ['firstSection'],
  // sectionSelector: '.vertical-scrolling',
  // slideSelector: '.horizontal-scrolling',
  navigation: true,
  slidesNavigation: true,
  controlArrows: false,
    

  afterLoad: function(anchorLink, index) {
    $header_top.css('background', 'rgba(0, 47, 77, .3)');
    $nav.css('background', 'rgba(0, 47, 77, .25)');
    if (index == 5) {
        $('#fp-nav').hide();
      }
  },

  
}); 
});

</script>

    #homepage {
  position: relative; }
  #homepage .slider {
    background-size: cover !important; }
    #homepage .slider .hero {
      padding: 0 25px;
      display: flex;
      flex-direction: column;
      height: calc(100vh - 10%); }
      #homepage .slider .hero .header {
        padding-top: 20px;
        flex: 1 1 70px;
        display: flex;
        align-items: center;
        justify-content: space-between; }
        #homepage .slider .hero .header .logo img {
          cursor: pointer;
          image-rendering: -webkit-optimize-contrast; }
        #homepage .slider .hero .header i {
          color: #fff;
          cursor: pointer; }
      #homepage .slider .hero .welcome {
        display: flex;
        justify-content: center;
        flex: 10 10 300px;
        text-align: center;
        align-items: center; }
        #homepage .slider .hero .welcome div {
          align-self: flex-end; }
          #homepage .slider .hero .welcome div .hero-headings {
            line-height: 90px;
            font-size: 155px;
            color: #fff;
            font-family: '__ITC Avant Garde Gothic Pro_5';
            font-weight: 700;
            letter-spacing: -5px;
            text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8); }
          #homepage .slider .hero .welcome div .hero-description {
            padding-bottom: 50px;
            font-family: Georgia;
            font-size: 20px;
            line-height: 22px;
            font-weight: bold;
            letter-spacing: 5px;
            color: #fff;
            text-transform: uppercase;
            /*text-shadow: 0px 0px 15px rgba(0,0,0,0.8);*/ }

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>branding</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="manifest" href="site.webmanifest">
        <link rel="apple-touch-icon" href="icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" type="text/css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
        <link rel="stylesheet" type="text/css" href="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" />

        
    </head>
    <body>
        <div class="container">
            <div id="homepage" class="main">
                <div id="fullpage">
                    <section class="slider section" style="background: url('http://neonrobot.com/wp-content/uploads/2014/09/unsplash-1.jpg') center center;">
                        <div class="hero">
                            <div class="header">
                                <div class="logo"><img src="assets/img/logo.png" alt="logo"></div>
                                <i id="menu-open" class="fa fa-bars fa-lg"></i>
                            </div>
                            <div class="welcome">
                                <div>
                                    <div class="hero-  headings">Hello.</div>
                                    <div class="hero-description"></div> 
                                </div>
                            </div>
                        </div>
                        <div class="clients">
                            <div class="padding25">
                                <div class="clients-intro">Our Clients. &nbsp; <i class="fa   fa-angle-right"></i><i class="fa   fa-angle-right"></i></div>
                                <div class="clients-logos">sds</div>
                            </div>
                        </div>
                    </section>

                </div>
            </div>
        </div>
        
        <script src="https://www.google-analytics.com/analytics.js" async defer></script>
    </body>
</html>

javascript

jquery

css

slider

fullpage.js

回答 1

Stack Overflow用户

发布于 2018-04-24 15:23:11

您需要更改afterLoad回调函数，如下所示：

我使用了setInterval函数，通过每隔1秒调用一次moveSlideRight函数来使其自动化。

afterLoad: function(anchorLink, index) {
    $header_top.css('background', 'rgba(0, 47, 77, .3)');
    $nav.css('background', 'rgba(0, 47, 77, .25)');
    setInterval(function () {
        $.fn.fullpage.moveSlideRight();
    }, 1000);
    if (index == 5) {
        $('#fp-nav').hide();
      }
  },

下面是一个示例链接：codepen link

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49995609

复制

相似问题

问如何在fullpageJS中创建自动播放滑块
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在fullpageJS中创建自动播放滑块EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在fullpageJS中创建自动播放滑块
EN