如何在Basic jQuery滑块中对事件执行操作

Question

我使用http://www.basic-slider.com/的bjqs插件获得了滑块 通过文档，我发现只有选项，但没有事件/功能 我对事件/函数的意思是onSlideChange，onSlideDisplay

我发现其他插件提供类似的东西（bxslider有onSlideBefore，onSlideAfter ..etc）但是我无法更改使用过的插件，因为它的遗留代码不是我的全部重启

任何指向此类实现的指针，甚至是如何实现此功能的人都非常感激

谢谢

更新 我试过在[here]中摆弄这个（请忽略丑陋的风格^ _ ^）

 if (i == (length - 1)) {
        isLastSlide = "isLastSlide=\"true\"";
    }
    $(".bjqs").append("<li " + isLastSlide 
+ "><img src='http://exmoorpet.com/wp-content/uploads/2012/08/cat.png' title='slide number " 
+ (i + 1) + "'></li>");

}

在所需幻灯片中添加了一个标记（测试用例：最后一张幻灯片）

$('li[isLastSlide="TRUE"]:visible').css('background', 'red');

然后尝试检测何时显示具有该标志的幻灯片以执行诸如更改样式或甚至调用函数但尚未正常工作的内容

我会继续尝试和更新

1-成功更改了所需幻灯片的CSS 我在比较标志值

时遇到了错误

$('li[isLastSlide="true"]:visible').css('background', 'red');  

现在致力于调用函数

Answer 1

在aleha的评论和链接的帮助下，我能够扩展插件以传递函数

这是帮助遇到此问题的人的代码

(function($) {

"use strict";

$.fn.bjqs = function(o) {

    // slider default settings
    var defaults = {
        // w + h to enforce consistency
        width: 700,
        height: 300,
        // transition valuess
        animtype: 'fade',
        animduration: 450, // length of transition
        animspeed: 4000, // delay between transitions
        automatic: true, // enable/disable automatic slide rotation

        // control and marker configuration
        showcontrols: true, // enable/disable next + previous UI elements
        centercontrols: true, // vertically center controls
        nexttext: 'Next', // text/html inside next UI element
        prevtext: 'Prev', // text/html inside previous UI element
        showmarkers: true, // enable/disable individual slide UI markers
        centermarkers: true, // horizontally center markers

        // interaction values
        keyboardnav: true, // enable/disable keyboard navigation
        hoverpause: true, // enable/disable pause slides on hover

        // presentational options
        usecaptions: true, // enable/disable captions using img title attribute
        randomstart: false, // start from a random slide
        responsive: false     // enable responsive behaviour

        //custom callback
        ,custom: null
    };

    // create settings from defauls and user options
    var settings = $.extend({}, defaults, o);

    // slider elements
    var $wrapper = this,
            $slider = $wrapper.find('ul.bjqs'),
            $slides = $slider.children('li'),
            // control elements
            $c_wrapper = null,
            $c_fwd = null,
            $c_prev = null,
            // marker elements
            $m_wrapper = null,
            $m_markers = null,
            // elements for slide animation
            $canvas = null,
            $clone_first = null,
            $clone_last = null;

    // state management object
    var state = {
        slidecount: $slides.length, // total number of slides
        animating: false, // bool: is transition is progress
        paused: false, // bool: is the slider paused
        currentslide: 1, // current slide being viewed (not 0 based)
        nextslide: 0, // slide to view next (not 0 based)
        currentindex: 0, // current slide being viewed (0 based)
        nextindex: 0, // slide to view next (0 based)
        interval: null              // interval for automatic rotation
    };

    var responsive = {
        width: null,
        height: null,
        ratio: null
    };

    // helpful variables
    var vars = {
        fwd: 'forward',
        prev: 'previous'
    };

    // run through options and initialise settings
    var init = function() {

        // differentiate slider li from content li
        $slides.addClass('bjqs-slide');

        // conf dimensions, responsive or static
        if (settings.responsive) {
            conf_responsive();
        }
        else {
            conf_static();
        }

        // configurations only avaliable if more than 1 slide
        if (state.slidecount > 1) {

            // enable random start
            if (settings.randomstart) {
                conf_random();
            }

            // create and show controls
            if (settings.showcontrols) {
                conf_controls();
            }

            // create and show markers
            if (settings.showmarkers) {
                conf_markers();
            }

            // enable slidenumboard navigation
            if (settings.keyboardnav) {
                conf_keynav();
            }

            // enable pause on hover
            if (settings.hoverpause && settings.automatic) {
                conf_hoverpause();
            }

            // conf slide animation
            if (settings.animtype === 'slide') {
                conf_slide();
            }

        } else {
            // Stop automatic animation, because we only have one slide! 
            settings.automatic = false;
        }

        if (settings.usecaptions) {
            conf_captions();
        }

        // TODO: need to accomodate random start for slide transition setting
        if (settings.animtype === 'slide' && !settings.randomstart) {
            state.currentindex = 1;
            state.currentslide = 2;
        }

        // slide components are hidden by default, show them now
        $slider.show();
        $slides.eq(state.currentindex).show();

        // Finally, if automatic is set to true, kick off the interval
        if (settings.automatic) {
            state.interval = setInterval(function() {
                go(vars.fwd, false, settings.custom);
            }, settings.animspeed);
        }

    };

    var conf_responsive = function() {

        responsive.width = $wrapper.outerWidth();
        responsive.ratio = responsive.width / settings.width,
                responsive.height = settings.height * responsive.ratio;

        if (settings.animtype === 'fade') {

            // initial setup
            $slides.css({
                'height': settings.height,
                'width': '100%'
            });
            $slides.children('img').css({
                'height': settings.height,
                'width': '100%'
            });
            $slider.css({
                'height': settings.height,
                'width': '100%'
            });
            $wrapper.css({
                'height': settings.height,
                'max-width': settings.width,
                'position': 'relative'
            });

            if (responsive.width < settings.width) {

                $slides.css({
                    'height': responsive.height
                });
                $slides.children('img').css({
                    'height': responsive.height
                });
                $slider.css({
                    'height': responsive.height
                });
                $wrapper.css({
                    'height': responsive.height
                });

            }

            $(window).resize(function() {

                // calculate and update dimensions
                responsive.width = $wrapper.outerWidth();
                responsive.ratio = responsive.width / settings.width,
                        responsive.height = settings.height * responsive.ratio;

                $slides.css({
                    'height': responsive.height
                });
                $slides.children('img').css({
                    'height': responsive.height
                });
                $slider.css({
                    'height': responsive.height
                });
                $wrapper.css({
                    'height': responsive.height
                });

            });

        }

        if (settings.animtype === 'slide') {

            // initial setup
            $slides.css({
                'height': settings.height,
                'width': settings.width
            });
            $slides.children('img').css({
                'height': settings.height,
                'width': settings.width
            });
            $slider.css({
                'height': settings.height,
                'width': settings.width * settings.slidecount
            });
            $wrapper.css({
                'height': settings.height,
                'max-width': settings.width,
                'position': 'relative'
            });

            if (responsive.width < settings.width) {

                $slides.css({
                    'height': responsive.height
                });
                $slides.children('img').css({
                    'height': responsive.height
                });
                $slider.css({
                    'height': responsive.height
                });
                $wrapper.css({
                    'height': responsive.height
                });

            }

            $(window).resize(function() {

                // calculate and update dimensions
                responsive.width = $wrapper.outerWidth(),
                        responsive.ratio = responsive.width / settings.width,
                        responsive.height = settings.height * responsive.ratio;

                $slides.css({
                    'height': responsive.height,
                    'width': responsive.width
                });
                $slides.children('img').css({
                    'height': responsive.height,
                    'width': responsive.width
                });
                $slider.css({
                    'height': responsive.height,
                    'width': responsive.width * settings.slidecount
                });
                $wrapper.css({
                    'height': responsive.height
                });
                $canvas.css({
                    'height': responsive.height,
                    'width': responsive.width
                });

                resize_complete(function() {
                    go(false, state.currentslide, settings.custom);
                }, 200, "some unique string");

            });

        }

    };

    var resize_complete = (function() {

        var timers = {};

        return function(callback, ms, uniqueId) {
            if (!uniqueId) {
                uniqueId = "Don't call this twice without a uniqueId";
            }
            if (timers[uniqueId]) {
                clearTimeout(timers[uniqueId]);
            }
            timers[uniqueId] = setTimeout(callback, ms);
        };

    })();

    // enforce fixed sizing on slides, slider and wrapper
    var conf_static = function() {

        $slides.css({
            'height': settings.height,
            'width': settings.width
        });
        $slider.css({
            'height': settings.height,
            'width': settings.width
        });
        $wrapper.css({
            'height': settings.height,
            'width': settings.width,
            'position': 'relative'
        });

    };

    var conf_slide = function() {

        // create two extra elements which are clones of the first and last slides
        $clone_first = $slides.eq(0).clone();
        $clone_last = $slides.eq(state.slidecount - 1).clone();

        // add them to the DOM where we need them
        $clone_first.attr({'data-clone': 'last', 'data-slide': 0}).appendTo($slider).show();
        $clone_last.attr({'data-clone': 'first', 'data-slide': 0}).prependTo($slider).show();

        // update the elements object
        $slides = $slider.children('li');
        state.slidecount = $slides.length;

        // create a 'canvas' element which is neccessary for the slide animation to work
        $canvas = $('<div class="bjqs-wrapper"></div>');

        // if the slider is responsive && the calculated width is less than the max width
        if (settings.responsive && (responsive.width < settings.width)) {

            $canvas.css({
                'width': responsive.width,
                'height': responsive.height,
                'overflow': 'hidden',
                'position': 'relative'
            });

            // update the dimensions to the slider to accomodate all the slides side by side
            $slider.css({
                'width': responsive.width * (state.slidecount + 2),
                'left': -responsive.width * state.currentslide
            });

        }
        else {

            $canvas.css({
                'width': settings.width,
                'height': settings.height,
                'overflow': 'hidden',
                'position': 'relative'
            });

            // update the dimensions to the slider to accomodate all the slides side by side
            $slider.css({
                'width': settings.width * (state.slidecount + 2),
                'left': -settings.width * state.currentslide
            });

        }

        // add some inline styles which will align our slides for left-right sliding
        $slides.css({
            'float': 'left',
            'position': 'relative',
            'display': 'list-item'
        });

        // 'everything.. in it's right place'
        $canvas.prependTo($wrapper);
        $slider.appendTo($canvas);

    };

    var conf_controls = function() {

        // create the elements for the controls
        $c_wrapper = $('<ul class="bjqs-controls"></ul>');
        $c_fwd = $('<li class="bjqs-next"><a href="#" data-direction="' + vars.fwd + '">' + settings.nexttext + '</a></li>');
        $c_prev = $('<li class="bjqs-prev"><a href="#" data-direction="' + vars.prev + '">' + settings.prevtext + '</a></li>');

        // bind click events
        $c_wrapper.on('click', 'a', function(e) {

            e.preventDefault();
            var direction = $(this).attr('data-direction');

            if (!state.animating) {

                if (direction === vars.fwd) {
                    go(vars.fwd, false, settings.custom);
                }

                if (direction === vars.prev) {
                    go(vars.prev, false, settings.custom);
                }

            }

        });

        // put 'em all together
        $c_prev.appendTo($c_wrapper);
        $c_fwd.appendTo($c_wrapper);
        $c_wrapper.appendTo($wrapper);

        // vertically center the controls
        if (settings.centercontrols) {

            $c_wrapper.addClass('v-centered');

            // calculate offset % for vertical positioning
            var offset_px = ($wrapper.height() - $c_fwd.children('a').outerHeight()) / 2,
                    ratio = (offset_px / settings.height) * 100,
                    offset = ratio + '%';

            $c_fwd.find('a').css('top', offset);
            $c_prev.find('a').css('top', offset);

        }

    };

    var conf_markers = function() {

        // create a wrapper for our markers
        $m_wrapper = $('<ol class="bjqs-markers"></ol>');

        // for every slide, create a marker
        $.each($slides, function(key, slide) {

            var slidenum = key + 1,
                    gotoslide = key + 1;

            if (settings.animtype === 'slide') {
                // + 2 to account for clones
                gotoslide = key + 2;
            }

            var marker = $('<li><a href="#">' + slidenum + '</a></li>');

            // set the first marker to be active
            if (slidenum === state.currentslide) {
                marker.addClass('active-marker');
            }

            // bind the click event
            marker.on('click', 'a', function(e) {
                e.preventDefault();
                if (!state.animating && state.currentslide !== gotoslide) {
                    go(false, gotoslide, settings.custom);
                }
            });

            // add the marker to the wrapper
            marker.appendTo($m_wrapper);

        });

        $m_wrapper.appendTo($wrapper);
        $m_markers = $m_wrapper.find('li');

        // center the markers
        if (settings.centermarkers) {
            $m_wrapper.addClass('h-centered');
            var offset = (settings.width - $m_wrapper.width()) / 2;
            $m_wrapper.css('left', offset);
        }

    };

    var conf_keynav = function() {

        $(document).keyup(function(event) {

            if (!state.paused) {
                clearInterval(state.interval);
                state.paused = true;
            }

            if (!state.animating) {
                if (event.keyCode === 39) {
                    event.preventDefault();
                    go(vars.fwd, false, settings.custom);
                } else if (event.keyCode === 37) {
                    event.preventDefault();
                    go(vars.prev, false, settings.custom);
                }
            }

            if (state.paused && settings.automatic) {
                state.interval = setInterval(function() {
                    go(vars.fwd);
                }, settings.animspeed);
                state.paused = false;
            }

        });

    };

    var conf_hoverpause = function() {

        $wrapper.hover(function() {
            if (!state.paused) {
                clearInterval(state.interval);
                state.paused = true;
            }
        }, function() {
            if (state.paused) {
                state.interval = setInterval(function() {
                    go(vars.fwd, false, settings.custom);
                }, settings.animspeed);
                state.paused = false;
            }
        });

    };

    var conf_captions = function() {

        $.each($slides, function(key, slide) {

            var caption = $(slide).children('img:first-child').attr('title');

            // Account for images wrapped in links
            if (!caption) {
                caption = $(slide).children('a').find('img:first-child').attr('title');
            }

            if (caption) {
                caption = $('<p class="bjqs-caption">' + caption + '</p>');
                caption.appendTo($(slide));
            }

        });

    };

    var conf_random = function() {

        var rand = Math.floor(Math.random() * state.slidecount) + 1;
        state.currentslide = rand;
        state.currentindex = rand - 1;

    };

    var set_next = function(direction) {

        if (direction === vars.fwd) {

            if ($slides.eq(state.currentindex).next().length) {
                state.nextindex = state.currentindex + 1;
                state.nextslide = state.currentslide + 1;
            }
            else {
                state.nextindex = 0;
                state.nextslide = 1;
            }

        }
        else {

            if ($slides.eq(state.currentindex).prev().length) {
                state.nextindex = state.currentindex - 1;
                state.nextslide = state.currentslide - 1;
            }
            else {
                state.nextindex = state.slidecount - 1;
                state.nextslide = state.slidecount;
            }

        }

    };

    var go = function(direction, position, custom) {

        // only if we're not already doing things
        if (!state.animating) {

            // doing things
            state.animating = true;

            if (position) {
                state.nextslide = position;
                state.nextindex = position - 1;
            }
            else {
                set_next(direction);
            }

            // fade animation
            if (settings.animtype === 'fade') {

                if (settings.showmarkers) {
                    $m_markers.removeClass('active-marker');
                    $m_markers.eq(state.nextindex).addClass('active-marker');
                }

                // fade out current
                $slides.eq(state.currentindex).fadeOut(settings.animduration);
                // fade in next
                $slides.eq(state.nextindex).fadeIn(settings.animduration, function() {

                    // update state variables
                    state.animating = false;
                    state.currentslide = state.nextslide;
                    state.currentindex = state.nextindex;

                });

            }

            // slide animation
            if (settings.animtype === 'slide') {

                if (settings.showmarkers) {

                    var markerindex = state.nextindex - 1;

                    if (markerindex === state.slidecount - 2) {
                        markerindex = 0;
                    }
                    else if (markerindex === -1) {
                        markerindex = state.slidecount - 3;
                    }

                    $m_markers.removeClass('active-marker');
                    $m_markers.eq(markerindex).addClass('active-marker');
                }

                // if the slider is responsive && the calculated width is less than the max width
                if (settings.responsive && (responsive.width < settings.width)) {
                    state.slidewidth = responsive.width;
                }
                else {
                    state.slidewidth = settings.width;
                }

                $slider.animate({'left': -state.nextindex * state.slidewidth}, settings.animduration, function() {

                    state.currentslide = state.nextslide;
                    state.currentindex = state.nextindex;

                    // is the current slide a clone?
                    if ($slides.eq(state.currentindex).attr('data-clone') === 'last') {

                        // affirmative, at the last slide (clone of first)
                        $slider.css({'left': -state.slidewidth});
                        state.currentslide = 2;
                        state.currentindex = 1;

                    }
                    else if ($slides.eq(state.currentindex).attr('data-clone') === 'first') {

                        // affirmative, at the fist slide (clone of last)
                        $slider.css({'left': -state.slidewidth * (state.slidecount - 2)});
                        state.currentslide = state.slidecount - 1;
                        state.currentindex = state.slidecount - 2;

                    }

                    state.animating = false;

                });

            }

        }
        if (typeof custom !== "undefined" || custom === null) {
            if (typeof custom == "function") {
                custom();
            }
        }
    };

    // lets get the party started :)
    init();

};

})(jQuery);