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

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

1 个答案: