Question

有人可以帮助我更改此示例的工作方式吗？我的意思是我希望当我用鼠标滚轮或箭头滚动时从左向右移动，而不是从上到下移动...我该如何实现？我今天整天都在尝试，但似乎找不到合适的解决方案没有成功。另外，如果有人对实现我的目标感兴趣，请告诉我:)

function scrollModal() {

    var $window = $(window);
    var $document = $(document);
    //Only links that starts with #
    var $navButtons = $(".modalNavLink").filter("[href^=\\#]");
    var $navGoPrev = $(".go-prev");
    var $navGoNext = $(".go-next");
    var $slidesContainer = $(".slides-container");
    var $slides = $(".slide");
    var $currentSlide = $slides.first();

    //Animating flag - is our app animating
    var isAnimating = false;

    //The height of the window
    var pageHeight = $window.innerHeight();

    //Key codes for up and down arrows on keyboard. We'll be using this to navigate change slides using the keyboard
    var keyCodes = {
        UP  : 38,
        DOWN: 40
    }


    // Going to the first slide
    goToSlide($currentSlide);


    $window.on("resize", onResize).resize();
    $window.on("mousewheel DOMMouseScroll", onMouseWheel);
    $document.on("keydown", onKeyDown);
    $navButtons.on("click", onNavButtonClick);
    $navGoPrev.on("click", goToPrevSlide);
    $navGoNext.on("click", goToNextSlide);



    function onNavButtonClick(event)
    {
        //The clicked button
        var $button = $(this);

        //The slide the button points to
        var $slide = $($button.attr("href"));

        //If the slide exists, we go to it
        if($slide.length)
        {
            goToSlide($slide);
            event.preventDefault();
        }
    }; // END onNavButtonClick



    // onKeyDown ===========================================================
    // Getting the pressed key. Only if it's up or down arrow, we go to prev or next slide and prevent default behaviour
    // This way, if there's text input, the user is still able to fill it
    function onKeyDown(event)
    {

        var PRESSED_KEY = event.keyCode;

        if(PRESSED_KEY == keyCodes.UP || PRESSED_KEY == 37)
        {
            goToPrevSlide();
            event.preventDefault();
        }
        else if(PRESSED_KEY == keyCodes.DOWN || PRESSED_KEY == 39)
        {
            goToNextSlide();
            event.preventDefault();
        }

    }; // END onKeyDown



    // onMouseWheel ===========================================================
    // When user scrolls with the mouse, we have to change slides
    function onMouseWheel(event)
    {
        //Normalize event wheel delta
        var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail;

        //If the user scrolled up, it goes to previous slide, otherwise - to next slide
        if(delta < -1)
        {
            goToNextSlide();
        }
        else if(delta > 1)
        {
            goToPrevSlide();
        }

        event.preventDefault();
    }; // END onMouseWheel



    // goToPrevSlide ===========================================================
    // If there's a previous slide, slide to it
    function goToPrevSlide()
    {
        if($currentSlide.prev().length)
        {
            goToSlide($currentSlide.prev());
        }
    }; // END goToPrevSlide


    // goToNextSlide ===========================================================
    // If there's a next slide, slide to it
    function goToNextSlide()
    {
        if($currentSlide.next().length)
        {
            goToSlide($currentSlide.next());
        }
    }; // END goToNextSlide



    // goToSlide ===============================================================
    // Actual transition between slides
    function goToSlide($slide)
    {
        // If the slides are not changing and there's such a slide
        if(!isAnimating && $slide.length)
        {
            //setting animating flag to true
            isAnimating = true;
            $currentSlide = $slide;

            //Sliding to current slide
            TweenLite.to($slidesContainer, 1, {scrollTo: {y: pageHeight * $currentSlide.index() }, onComplete: onSlideChangeEnd, onCompleteScope: this});

            //Animating menu items
            TweenLite.to($navButtons.filter(".active"), 0.5, {className: "-=active"});

            TweenLite.to($navButtons.filter("[href=\\#" + $currentSlide.attr("id") + "]"), 0.5, {className: "+=active"});

        }
    }; // END goToSlide




    // onSlideChangeEnd ========================================================
    // Once the sliding is finished, we need to restore "isAnimating" flag.
    // You can also do other things in this function, such as changing page title
    function onSlideChangeEnd()
    {
        isAnimating = false;
    }; // END onSlideChangeEnd

    // When user resize it's browser we need to know the new height, so we can properly align the current slide
    function onResize(event)
    {

        // This will give us the new height of the window
        var newPageHeight = $window.innerHeight();

        // If the new height is different from the old height ( the browser is resized vertically ), the slides are resized
        if(pageHeight !== newPageHeight)
        {
            pageHeight = newPageHeight;

            //This can be done via CSS only, but fails into some old browsers, so I prefer to set height via JS
            TweenLite.set([$slidesContainer, $slides], {height: pageHeight + "px"});

            //The current slide should be always on the top
            TweenLite.set($slidesContainer, {scrollTo: {y: pageHeight * $currentSlide.index() }});
        }};};

            scrollModal();

body, div, p{
        margin:0;
        padding:0;
      }

      body{
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 300;
        letter-spacing: 0.0635em;
      }
      a{
        text-decoration: none;
      }

      .slides-container{
        position: absolute;
        left: 0;
        top:0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 10;

      }

      .slide{
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .slide .centered{
        width: 60%;
        margin: 200px auto 0;
      }

      .slide .centered h1{
        text-align: center;
      }

      .slide .centered p{
        text-align: center;
        margin-top: 20px;
        font-size: 20px;
      }
      #slide-1{
        background-color:#ffffff;

      }
      #slide-2{
        background-color: #45949b;
      }
      #slide-3{
        background-color: #778899;
      }
      #slide-4{
        color:#ffffff;
        background-color: #291F37;
      }

      .go-prev, .go-next{
        cursor: pointer;
        font-weight: bold;
        text-decoration: underline;
      }

      nav{
        position: fixed;
        top: 50%;
        right: 0;
        width: 45px;
        transform: translateY(-50%);
        z-index: 999;
      }
      nav ul{
        list-style: none;
        text-align: center;
        padding: 0;
        margin: auto;

      }

      nav ul li{
        display: block;
      }
      nav ul li:last-child{
        margin-left: 0;
      }
      #back-to-tutorial{
        margin-left: 100px;
      }
      nav a{
        position: relative;
        top: 0;
        font-weight: normal;
        text-align: center;
        border: 1px solid #114469;
        border-radius: 50%;
        background-color: none;
        color:#114469;
      }

      nav a.active{
        background-color: #08385d;
        border: 1px solid #c00000;
      }

      @media and all(max-width:400px) {
        nav ul{
          margin-top: 18px;
        }
        nav ul li{
          margin-right:10px;
          margin-bottom: 10px;
        }
        nav a{
          padding: 0px 6px;
          font-size: 14px;
        }

      }

      @media all and (min-width:401px) {
        nav ul{
          margin-top: 23px;
        }
        nav ul li{
          margin-right: 15px;
          margin-bottom: 15px;
        }
        nav a{
          padding: 0px 8px;
          font-size: 18px;
        }
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<nav>
      <ul>
        <li><a href="#slide-1" class="modalNavLink">&nbsp</a></li>
        <li><a href="#slide-2" class="modalNavLink">&nbsp</a></li>
        <li><a href="#slide-3" class="modalNavLink">&nbsp</a></li>
        <li><a href="#slide-4" class="modalNavLink">&nbsp</a></li>
      </ul>
    </nav>

    <div class="slides-container">
      <div class="slide" id="slide-1">
        <div class="centered">
          <h1>fullscreen slides with GSAP</h1>
          <p>lets go to the <span class="go-next">next slide</span></p>
        </div>
      </div>

      <div class="slide" id="slide-2">
        <div class="centered">
          <h1>fullscreen slides with GSAP</h1>
          <p>lets go to the <span class="go-prev">next slide</span></p>
        </div>
      </div>

      <div class="slide" id="slide-3">
        <div class="centered">
          <h1>fullscreen slides with GSAP</h1>
          <p>lets go to the <span class="go-next">next slide</span></p>
        </div>
      </div>

      <div class="slide" id="slide-1">
        <div class="centered">
          <h1>fullscreen slides with GSAP</h1>
          <p>lets go to the <span class="go-next">next slide</span></p>
        </div>
      </div>
    </div>

Answer 1

我看到您正在使用GSAP的TweenLite插件，并且您可能没有在HTML文件中包含其核心脚本。

因此您需要在page.html代码中添加

<head>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/jquery.gsap.min.js"> </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenLite.min.js"> </script>
</head>

用箭头和鼠标滚轮移动幻灯片

1 个答案: