个人中心
gpt4 book ai didi

javascript - 我如何在整页 JS 中创建自动播放 slider

转载 作者：太空宇宙 更新时间：2023-11-04 01:16:39 25 4
gpt4 key购买 nike

我一直在尝试/学习使用 fullpagejs 创建网站，但我在创建自动播放 slider 时遇到问题。我只能创造水平滚动并不是我真正想在这里实现的。关于如何在不使用水平滚动的情况下实现这一目标的任何帮助？

大家好，我一直在尝试/学习使用 fullpagejs 创建网站，但我在创建自动播放 slider 时遇到问题。我只能创造水平滚动并不是我真正想在这里实现的。关于如何在不使用水平滚动的情况下实现这一目标的任何帮助？

<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>

最佳答案

您需要像这样更改您的 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

关于javascript - 我如何在整页 JS 中创建自动播放 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49995609/

25 4 0
文章推荐： c - 在程序开始时随机化#define
文章推荐： python - NumPy map 计算取决于索引
文章推荐： ruby-on-rails - 使用 Juggernaut 同步客户端计时器时处理延迟
文章推荐： c - 无符号转换 32 位
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com