Question

我想将自动滚动时间添加到我的滑块代码中，但是无法做到这一点，你可以建议我一些帮助代码的知识，以使此滑块在设定的时间间隔内自动滚动。

'use strict';

$(document).ready(function () {

  var $slides = $('.con__slide').length,
      topAnimSpd = 650,
      textAnimSpd = 1000,
      nextSlideSpd = topAnimSpd + textAnimSpd,
      animating = true,
      animTime = 4000,
      curSlide = 1,
      nextSlide,
      scrolledUp;

  setTimeout(function () {
    animating = false;
  }, 2300);

  //navigation up function
  function navigateUp() {
    if (curSlide > 1) {
      scrolledUp = true;
      pagination(curSlide);
      curSlide--;
    }
  }

  //navigation down function
  function navigateDown() {
    if (curSlide < $slides) {
      scrolledUp = false;
      pagination(curSlide);
      curSlide++;
      console.log(curSlide);
    }
  }

  $(window).on('load', function () {
    $('.con__slide--1').addClass('active');
  });

  //pagination function
  function pagination(slide, target) {
    animating = true;
    // Check if pagination was triggered by scroll/keys/arrows or direct click. If scroll/keys/arrows then check if scrolling was up or down.
    if (target === undefined) {
      nextSlide = scrolledUp ? slide - 1 : slide + 1;
    } else {
      nextSlide = target;
    }
    ////////// Slides //////////
    $('.con__slide--' + slide).removeClass('active');

    setTimeout(function () {
      $('.con__slide--' + nextSlide).addClass('active');
    }, nextSlideSpd);

    ////////// Nav //////////
    $('.con__nav-item--' + slide).removeClass('nav-active');
    $('.con__nav-item--' + nextSlide).addClass('nav-active');

    setTimeout(function () {
      animating = false;
    }, animTime);
  }

  // Mouse wheel trigger
  $(document).on('mousewheel DOMMouseScroll', function (e) {
    var delta = e.originalEvent.wheelDelta;
    if (animating) return;
    // Mouse Up
    if (delta > 0 || e.originalEvent.detail < 0) {
      navigateUp();
    } else {
      navigateDown();
    }
  });

  // Direct trigger
  $(document).on("click", ".con__nav-item:not(.nav-active)", function () {
    // Essential to convert target to a number with +, so curSlide would be a number
    var target = +$(this).attr('data-target');
    if (animating) return;
    pagination(curSlide, target);
    curSlide = target;
  });

  // Arrow trigger
  $(document).on('click', '.con__nav-scroll', function () {
    var target = $(this).attr('data-target');
    if (animating) return;
    if (target === 'up') {
      navigateUp();
    } else {
      navigateDown();
    }
  });

  // Key trigger
  $(document).on("keydown", function (e) {
    if (animating) return;
    if (e.which === 38) {
      navigateUp();
    } else if (e.which === 40) {
      navigateDown();
    }
  });


  var topLink = $(".con__slide--4-top-h-link"),
      botLink = $(".con__slide--4-bot-h-link");
  $(".con__slide--4-top-h-link, .con__slide--4-bot-h-link").on({
    mouseenter: function mouseenter() {
      topLink.css('text-decoration', 'underline');
      botLink.css('text-decoration', 'underline');
    },
    mouseleave: function mouseleave() {
      topLink.css('text-decoration', 'none');
      botLink.css('text-decoration', 'none');
    }
  });
});

希望您能理解上面的代码，如果您有任何疑问可以随时询问我，请尽快帮助我。

Answer 1

在您的代码中添加了setInterval。

setInterval(() => {
if (curSlide >= $slides){
    if (animating) return;
    pagination(4, 1);
    curSlide = 1;
} 
else
    navigateDown();
}, 10000);

选中updated fiddle。

Answer 2

更新以下navigationDown代码。 //导航功能

Username

将此添加到下面的行

  function navigateDown() {
    if (curSlide < $slides) {
      scrolledUp = false;
      pagination(curSlide);
      curSlide++;
      console.log(curSlide);
    }else{
    curSlide=1;
    pagination(4,1)
    }
  }

如何在滑块中添加自动滚动

2 个答案: