如何在jShowoff中检测更改幻灯片事件之前和之后？

Question

我正在使用 jShowoff 滑块，并且需要检测幻灯片更改之前和之后的时刻。以前很简单，但是我在检测幻灯片索引刚刚更改的时刻时遇到了问题。我该怎么做？

我为每张幻灯片添加了一个 id，如何编写一个函数来检测幻灯片何时发生变化？

$("#rotator #slides").append(String.format('<div><a href="{0}" data-additional-url="{1}" data-id="{2}"><img src="{3}" /></a></div>', ob.RedirectURL, ob.AdditionalURL, index, imgSrc));

jshowoff：

(function ($) {
$.fn.jshowoff = function (settings) {
    var config = {
        animatePause: true,
        autoPlay: true,
        changeSpeed: 600,
        controls: true,
        controlText: {
            play: 'Play',
            pause: 'Pause',
            next: 'Next',
            previous: 'Previous'
        },
        effect: 'fade',
        hoverPause: true,
        links: true,
        speed: 3000
    };
    if (settings) $.extend(true, config, settings);
    if (config.speed < (config.changeSpeed + 20)) {
        alert('jShowOff: Make speed at least 20ms longer than changeSpeed; 
the fades aren\'t always right on time.');
        return this;
    };
    this.each(function (i) {
        var $cont = $(this);
        var gallery = $(this).children().remove();
        var timer = '';
        var counter = 0;
        var preloadedImg = [];
        var howManyInstances = $('.jshowoff').length + 1;
        var uniqueClass = 'jshowoff-' + howManyInstances;
        var cssClass = config.cssClass != undefined ? config.cssClass : '';
        $cont.css('position', 'relative').wrap('<div class="jshowoff ' + 
uniqueClass + '" />');
        var $wrap = $('.' + uniqueClass);
        $wrap.css('position', 'relative').addClass(cssClass);
        $(gallery[0]).clone().appendTo($cont);
        preloadImg();

（一些设置）

if (config.links) {
       var handle = uniqueClass != undefined ? uniqueClass : 
uniqueClass2;
                $('.' + handle + '-active').removeClass(handle + '-active 
jshowoff-active');
                $('.' + handle + '-slidelinks 
a').eq(counter).addClass(handle + '-active jshowoff-active');
            };
        };

这里是我对 beforechange 声明的警告

function transitionTo(gallery, index, uniqueClass2) {
alert("beforechange");           //alert
var oldCounter = counter;
            if ((counter >= gallery.length) || (index >= gallery.length)) {
                counter = 0;
                var e2b = true;
            } else if ((counter < 0) || (index < 0)) {
                counter = gallery.length - 1;
                var b2e = true;
            } else {
                counter = index;
            }
};

        function isPlaying() {
        return $('.' + uniqueClass + '-play').hasClass('jshowoff- 
paused') ? false : true;
        };

        function play(src) {
            if (!isBusy()) {
                counter++;
                transitionTo(gallery, counter, uniqueClass);
                if (src == 'hover' || !isPlaying()) {
                    timer = setInterval(function () {
                        play();
                    }, config.speed);
                }
                if (!isPlaying()) {
                    $('.' + uniqueClass + '- 
play').text(config.controlText.pause).removeClass('jshowoff-paused ' + 
uniqueClass + '-paused');
                }
            };
        };
return this;
};
})(jQuery);

Answer 1

这里最好的答案是使用更有信誉和功能丰富的 jQuery 插件。有许多（可能有数百个）jQuery 幻灯片插件编写得非常好，非常高效，并提供了许多可用于添加自己的自定义功能的特性和挂钩。

Here's 7 Great jQuery Slideshow Plugins

我并不是要刻薄，但是将这两个 jQuery 插件串联使用它们的使用方式非常非常低效，并且插件中的代码已经不是很好。这并不可怕，而且可以工作，但是有更好的插件可用。不要浪费自己的时间重新发明轮子！

好的 - 话虽如此，我在您的插件中添加了一些代码并更新了您的小提琴。我在添加代码// *added* 的任何地方都添加了此评论，因此您可以看到我做了什么。基本上，jsshowoff 插件的选项现在有两个额外的设置。只需将您的代码放在那里，它会在每个动画之前和之后触发一次。

$("#features").jshowoff({
    links: true,
    speed: 5000,
    effect: 'fade',
    hoverPause: false,
    beforeSlide: () => {
        // add before stuff here
    },
    afterSlide: () => {
        // add after stuff here
    }
});

您需要从 JSFiddle 复制我的 javascript 并更新项目中的 js。

JS Fiddle