javascript - 如何为此 Slice Slider 添加自动播放？

Question

我这里有一个 slider ，但我不知道如何实现自动播放功能。我可以在 var settings 中快速设置吗？

我尝试在 init 行前后填写 setInterval(spin, 3000); 命令，但到目前为止还没有成功。

(function($) {

 $.fn.sliceSlider = function(options) {       
    var settings = {  
        speed : '500',
        easing : 'cubic-bezier(0.8, 0, 0.2, 1)',

    };

    if(options) {
        $.extend(settings, options);
    }

    return this.each(function() {   

        var $this = $(this),
            $rightColumn = $this.find('.slice-slider-right-column'),
            $rightWrapper = $this.find('.slice-slider-right-column .slice-slider-wrapper'),
            $rightSlide = $this.find('.slice-slider-right-column .slice-slider-slide'),
            $length = $rightSlide.length,
            $settings = settings,
            mousewheelFinish = 0,

            $leftColumnContent = "";

        $rightSlide.each(function(){
            $leftColumnContent = '<div class="slice-slider-slide">'+$(this).html()+'</div>' + $leftColumnContent;
        });
        $('<div class="slice-slider-left-column"><div class="slice-slider-wrapper">'+$leftColumnContent+'</div></div>').insertBefore($rightColumn);
        if($length>1) $this.append('<div class="pagination"><div class="point active"></div>'+'<div class="point"></div>'.times($length-1)+'</div>');

        var $leftWrapper = $this.find('.slice-slider-left-column .slice-slider-wrapper'),
            $leftSlide = $this.find('.slice-slider-left-column .slice-slider-slide');

        $leftSlide.filter(':last').addClass('active').prevAll().addClass('prev');
        $rightSlide.filter(':first').addClass('active').nextAll().addClass('next');

        $this.find('.slice-slider-wrapper, .slice-align-animation').css({'transition':'all '+$settings.speed+'ms '+$settings.easing, '-webkit-transition':'all '+$settings.speed+'ms '+$settings.easing});

        function init(){
            setActiveSlice($leftWrapper, $leftSlide.filter('.active').index());
            setActiveSlice($rightWrapper, $rightSlide.filter('.active').index());

        }

        function setActiveSlice(foo, index){
            foo.css({'top':$this.height()*(-1)*index});
        }

        init();
        $('.rotate').css({'width':$('.rotate:visible').parent().height()});

        $this.on('mousewheel', function(event) {
            if(!mousewheelFinish && !$('body').hasClass('min-height')){
                mousewheelFinish = 1;
                setTimeout(function(){mousewheelFinish = 0;}, $settings.speed);
                if(event.deltaY>0) {
                    $leftSlide.filter('.active:not(:last-child)').removeClass('active prev next').addClass('prev').next().removeClass('prev next').addClass('active');
                    $rightSlide.filter('.active:not(:first-child)').removeClass('active prev next').addClass('next').prev().removeClass('prev next').addClass('active');
                    $this.find('.pagination .point.active:not(:first-child)').removeClass('active').prev().addClass('active');
                }
                else {
                    $leftSlide.filter('.active:not(:first-child)').removeClass('active prev next').addClass('next').prev().removeClass('prev next').addClass('active');
                    $rightSlide.filter('.active:not(:last-child)').removeClass('active prev next').addClass('prev').next().removeClass('prev next').addClass('active');
                    $this.find('.pagination .point.active:not(:last-child)').removeClass('active').next().addClass('active');
                }
                init();
            }
        });

        $this.find('.pagination .point').on('click', function(){
            $(this).parent().find('.active').removeClass('active');
            $(this).addClass('active');
            var index = $this.find('.pagination .point').filter('.active').index(),
                activeSlideLeft = $leftSlide.eq($length-1-index),
                activeSlideRight = $rightSlide.eq(index);

            $leftSlide.removeClass('active prev next');
            $rightSlide.removeClass('active prev next');

            activeSlideLeft.addClass('active').prevAll().addClass('prev');
            activeSlideLeft.nextAll().addClass('next');

            activeSlideRight.addClass('active').prevAll().addClass('prev');
            activeSlideRight.nextAll().addClass('next');

            init();
        });

我希望在页面完全加载时启动 slider ...

Answer 1

欢迎，如果我理解得很好，您可以使用已有的代码轻松地为此创建一个函数。在代码段的末尾添加此代码:

const changeSlide = () => {
  $leftSlide.filter('.active:not(:first-child)').removeClass('active prev next').addClass('next').prev().removeClass('prev next').addClass('active');
  $rightSlide.filter('.active:not(:last-child)').removeClass('active prev next').addClass('prev').next().removeClass('prev next').addClass('active');
  $this.find('.pagination .point.active:not(:last-child)').removeClass('active').next().addClass('active');

  init();
}

let myAutoplay = setInterval(changeSlide, 3000);

请注意，它会停在最后一个 slider 上，如果您愿意，可以跳转并从头开始。

为避免您的鼠标滚轮出现任何问题，您只需在每次用户与其交互时清除并重新设置间隔。像这样:

$this.on('mousewheel', function(event) {
  clearInterval(myAutoplay);
  myAutoplay = setInterval(changeSlide, 3000);
  // The rest of the code
});

希望这对您有所帮助，或者至少能为您指明正确的方向 :)