我使用这个翻书工作一切正常,但我需要滑块才能完全具有某些特定页面,类似于(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'
});
}