jsTurn Slider Bar

时间:2017-11-19 19:12:12

标签: javascript jquery

我使用这个翻书工作一切正常,但我需要滑块才能完全具有某些特定页面,类似于(1,10-11,20-21,30-11)我不知道我有什么价值需要改变。

( "#slider" ).slider({
    min: 1,
    max: 12, //had this value before 

    start: function(event, ui) {

        if (!window._thumbPreview) {
            _thumbPreview = $('<div />', {'class': 'thumbnail'}).html('<div></div>');
            setPreview(ui.value);
            _thumbPreview.appendTo($(ui.handle));
        } else
            setPreview(ui.value);

        moveBar(false);

    },

    slide: function(event, ui) {

        setPreview(ui.value);

    },

    stop: function() {

        if (window._thumbPreview)
            _thumbPreview.removeClass('show');

        $('.magazine').turn('page', Math.max(1, $(this).slider('value')*2-2));

    }
});

//////////////////////////////这是杂志.js function setPreview(view){

var previewWidth = 112,
    previewHeight = 73,
    previewSrc = 'pages/preview.jpg',
    preview = $(_thumbPreview.children(':first')),
    numPages = (view==1 || view==$('#slider').slider('option', 'max')) ? 1 : 2,
    width = (numPages==1) ? previewWidth/2 : previewWidth;

_thumbPreview.
    addClass('no-transition').
    css({width: width + 15,
        height: previewHeight + 15,
        top: -previewHeight - 30,
        left: ($($('#slider').children(':first')).width() - width - 15)/2
    });

preview.css({
    width: width,
    height: previewHeight
});

if (preview.css('background-image')==='' ||
    preview.css('background-image')=='none') {

    preview.css({backgroundImage: 'url(' + previewSrc + ')'});

    setTimeout(function(){
        _thumbPreview.removeClass('no-transition');
    }, 0);

}

preview.css({backgroundPosition:
    '0px -'+((view-1)*previewHeight)+'px'
});

}

0 个答案:

没有答案