如何在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));

炫耀：

(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幻灯片，它们编写得非常好，效率很高，并且提供了许多特性和挂钩，可以用来添加您自己的自定义功能。

这里有7个伟大的jQuery幻灯片插件

我不想这么刻薄，但同时使用这两个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