Question

我在这里有一个滑块，我无法弄清楚如何实现自动播放功能。我可以在var设置中快速设置吗？

我尝试在setInterval(spin, 3000);行的前面和之后填写init命令，但是到目前为止，它没有解决问题。

(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();
        });

我希望在页面完全加载后启动滑块...

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

请注意，它将停止在最后一个滑块中，如果您愿意，可以从头开始重新跳跃。

为避免mousewheel出现任何问题，您只需要清除并重新设置用户每次与之交互的时间间隔。像这样：

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

希望获得帮助，或者至少将您指向正确的方向：）

如何向此切片滑块添加自动播放功能？

1 个答案: