如何在 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 插件是非常非常低效的，而且插件中的代码已经不是很好。这并不可怕，而且有效，但是有更好的插件可用。不要浪费自己的时间重新发明轮子！

好的 - 综上所述，我在您的插件中添加了一些代码并更新了您的 fiddle。我在添加代码 // *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

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

How to detect before and after change slide event in jShowoff?

javascript

jquery

jshowoff