获取此滑块以自动播放

如何解决获取此滑块以自动播放

我对 javascript 一无所知，但一位客户问我是否可以让这个滑块自动播放。如果有人可以提供帮助，那就太棒了。我试图让它工作但无济于事，所以我决定在这里寻求帮助。

https://codepen.io/mrspok407/pen/bwLwvL

$(document).ready(function() {
    const $cont = $('.cont');
    const $slider = $('.slider');
    const $nav = $('.nav');
    const winW = $(window).width();
    const animspd = 750; // Change also in CSS
    const distOfLetGo = winW * 0.2;
    let curSlide = 1;
    let animation = false;
    let autoScrollVar = true;
    let diff = 0;
    
    // Generating slides
    let arrCities = ['Amsterdam','Rome','New—York','Singapore','Prague']; // Change number of slides in CSS also
    let numOfCities = arrCities.length;
    let arrCitiesDivided = [];

    arrCities.map((city) => {
        let length = city.length;
        let letters = Math.floor(length / 4);
        let exp = new RegExp(".{1," + letters + "}","g");
        
        arrCitiesDivided.push(city.match(exp));
    });
    
    let generateSlide = function(city) {
        let frag1 = $(document.createDocumentFragment());
        let frag2 = $(document.createDocumentFragment());
        const numSlide = arrCities.indexOf(arrCities[city]) + 1;
        const firstLetter = arrCitiesDivided[city][0].charat(0);

        const $slide =
                    $(`<div data-target="${numSlide}" class="slide slide--${numSlide}">
                            <div class="slide__darkbg slide--${numSlide}__darkbg"></div>
                            <div class="slide__text-wrapper slide--${numSlide}__text-wrapper"></div>
                        </div>`);

        const letter = 
                    $(`<div class="slide__letter slide--${numSlide}__letter">
                            ${firstLetter}
                        </div>`);

        for (let i = 0,length = arrCitiesDivided[city].length; i < length; i++) {
            const text = 
                        $(`<div class="slide__text slide__text--${i + 1}">
                                ${arrCitiesDivided[city][i]}
                            </div>`);
            frag1.append(text);
        }

        const navSlide = $(`<li data-target="${numSlide}" class="nav__slide nav__slide--${numSlide}"></li>`);
        frag2.append(navSlide);
        $nav.append(frag2);

        $slide.find(`.slide--${numSlide}__text-wrapper`).append(letter).append(frag1);
        $slider.append($slide);

        if (arrCities[city].length <= 4) {
            $('.slide--'+ numSlide).find('.slide__text').css("font-size","12vw");
        }
    };

    for (let i = 0,length = numOfCities; i < length; i++) {
        generateSlide(i);
    }

    $('.nav__slide--1').addClass('nav-active');

    // Navigation
    function bullets(dir) {
        $('.nav__slide--' + curSlide).removeClass('nav-active');
        $('.nav__slide--' + dir).addClass('nav-active');
    }
    
    function timeout() {
        animation = false;
    }
    
    function pagination(direction) {
        animation = true;
        diff = 0;
        $slider.addClass('animation');
        $slider.css({
            'transform': 'translate3d(-' + ((curSlide - direction) * 100) + '%,0)'
        });
        
        $slider.find('.slide__darkbg').css({
                'transform': 'translate3d(' + ((curSlide - direction) * 50) + '%,0)'
        });
        
        $slider.find('.slide__letter').css({
                'transform': 'translate3d(0,0)',});
        
        $slider.find('.slide__text').css({
            'transform': 'translate3d(0,0)'
        });
    }
    
    function navigateRight() {
        if (!autoScrollVar) return;
        if (curSlide >= numOfCities) return;
        pagination(0);
        setTimeout(timeout,animspd);
        bullets(curSlide + 1);
        curSlide++;
    }
    
    function navigateLeft() {
        if (curSlide <= 1) return;
        pagination(2);
        setTimeout(timeout,animspd);
        bullets(curSlide - 1);
        curSlide--;
    }

    function toDefault() {
        pagination(1);
        setTimeout(timeout,animspd);
    }
    
    // Events
    $(document).on('mousedown touchstart','.slide',function(e) {
        if (animation) return;
        let target = +$(this).attr('data-target');
        let startX = e.pageX || e.originalEvent.touches[0].pageX;
        $slider.removeClass('animation');
        
        $(document).on('mousemove touchmove',function(e) {
            let x = e.pageX || e.originalEvent.touches[0].pageX;
            diff = startX - x;
            if (target === 1 && diff < 0 || target === numOfCities && diff > 0) return;
            
            $slider.css({
                'transform': 'translate3d(-' + ((curSlide - 1) * 100 + (diff / 30)) + '%,0)'
            });
            
            $slider.find('.slide__darkbg').css({
                'transform': 'translate3d(' + ((curSlide - 1) * 50 + (diff / 60)) + '%,0)'
            });
            
            $slider.find('.slide__letter').css({
                'transform': 'translate3d(' +  (diff / 60) + 'vw,});
            
            $slider.find('.slide__text').css({
                'transform': 'translate3d(' + (diff / 15) + 'px,0)'
            });
        })  
    })
    
    $(document).on('mouseup touchend',function(e) {
        $(document).off('mousemove touchmove');
        
        if (animation) return;
        
        if (diff >= distOfLetGo) {
            navigateRight();
        } else if (diff <= -distOfLetGo) {
            navigateLeft();
        } else {
            toDefault();
        }
    });
    
    $(document).on('click','.nav__slide:not(.nav-active)',function() {
        let target = +$(this).attr('data-target');
        bullets(target);
        curSlide = target;
        pagination(1);
    }); 
    
    $(document).on('click','.side-nav',function() {
        let target = $(this).attr('data-target');
        
        if (target === 'right') navigateRight();
        if (target === 'left') navigateLeft();
    });
    
    $(document).on('keydown',function(e) {
        if (e.which === 39) navigateRight();
        if (e.which === 37) navigateLeft();
    });
    
    $(document).on('mousewheel DOMMouseScroll',function(e) {
        if (animation) return;
    let delta = e.originalEvent.wheelDelta;
        
    if (delta > 0 || e.originalEvent.detail < 0) navigateLeft();
        if (delta < 0 || e.originalEvent.detail > 0) navigateRight();
  });
});

任何帮助将不胜感激，因为我对 Java 一无所知。

解决方法

好的，经过一番挖掘，我找到了解决方案，它实际上很简单。

只需添加

 setInterval(function () {
    navigateRight();
},3000);

之后

$(document).ready(function () {

它看起来像这样：

$(document).ready(function () {

  setInterval(function () {
    navigateRight();
},3000);
  
  const $cont = $('.cont');
  const $slider = $('.slider');
  const $nav = $('.nav');
  const winW = $(window).width();
  const animSpd = 750; // Change also in CSS
  const distOfLetGo = winW * 0.2;
  let curSlide = 1;
  let animation = false;
  let autoScrollVar = true;
  let diff = 0;

我会把这篇文章留给任何寻找类似解决方案的人。

,

您要查找的是 setInterval，这将在 X 毫秒后运行一个函数。

这个函数：

// true or false based on existance of the attribute
const shouldAutoplay = $slider.attr('data-autoplay');
const interval = 5000; // 5 Seconds
let autoplayIntervalHandle = null;


function autoplay(shouldAutoplay,intervalInMS) {
    if (!shouldAutoplay) return;        
    autoplayIntervalHandle = setInterval(() => setTimeout(navigateRight,animSpd),intervalInMS || 3000);
}

// place this near the bottom of your $(document).ready(function() { ... });
autoplay(shouldAutoplay,interval);

这应该足以让您的客户满意，但使用 setInterval 会使某些网站变慢。

我制作了 autoplayIntervalHandle 以便您可以使用 clearInterval 重置和清除计时器。如果出现性能问题，我只会担心。