jQuery Basic Slider - 删除调整大小/响应功能

时间:2013-01-10 15:55:22

标签: javascript jquery wordpress slider

我正在使用Basic jQuery Slider(http://basic-slider.com/),我正在尝试删除响应/调整大小功能。滑块应保持在居中的div内,而不是改变大小 - 但是一旦我调整窗口大小,滑块就会垂直拉伸,但宽度似乎没问题。有问题的页面是http://www.ritapaynemusic.com/home

我在这里粘贴了js代码 - 希望有人可以帮助我!感谢。

/*
* Basic jQuery Slider plug-in v.1.3
*
* http://www.basic-slider.com
*
* Authored by John Cobb
* http://www.johncobb.name
* @john0514
*
* Copyright 2011, John Cobb
* License: GNU General Public License, version 3 (GPL-3.0)
* http://www.opensource.org/licenses/gpl-3.0.html
*
*/

;(function($) {

"use strict";

$.fn.bjqs = function(o) {

    // slider default settings
    var defaults        = {

        // w + h to enforce consistency
        width           : 720,
        height          : 265,

        // transition valuess
        animtype        : 'fade',
        animduration    : 450,      // length of transition
        animspeed       : 4000,     // delay between transitions
        automatic       : null,     // enable/disable automatic slide rotation

        // control and marker configuration
        showcontrols    : true,     // enable/disable next + previous UI elements
        centercontrols  : true,     // vertically center controls
        nexttext        : '<img src="http://www.ritapaynemusic.com/wp-content/themes/sfas/slider/img/next.png">',   // text/html inside next UI element
        prevtext        : '<img src="http://www.ritapaynemusic.com/wp-content/themes/sfas/slider/img/prev.png">',   // 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     : null,     // start from a random slide
        responsive      : false,     // enable responsive behaviour

    };

    // 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       : null,            // bool: is transition is progress
        paused          : null,            // 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();
            }

        }

        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.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'        : '290px',
                'width'         : '720px'
            });
            $slider.css({
                'height'        : '290px',
                'width'         : '720px'
            });
            $wrapper.css({
                'height'        : '290px',
                'max-width'     : '720px',
                'position'      : 'relative'
            });

            if(responsive.width < settings.width){

                $slides.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(null,state.currentslide);
                }, 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);
                }

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

            }

        });

        // 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);
                }
            });

            // 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);
                } else if (event.keyCode === 37) {
                    event.preventDefault();
                    go(vars.prev, false);
                }
            }

            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.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 = $('<div class="capt" style="width: 310px; height: auto; vertical-align:middle; display: inline-block;"><span class="bjqs-caption">' + caption + '</span></div>');
                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) {

        // 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;

                });

            }

        }

    };

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

};

})(jQuery);

1 个答案:

答案 0 :(得分:1)

问题解决了。

只需对索引文件进行以下更改:

 /*  height      : 320,
    width       : 620,*/
    responsive  : false