我的 jQuery 轮播出现问题：当我单击“下一张幻灯片”按钮时，它的幻灯片不会在视口上居中。
相反，它们将被放置在中心的“某处”，稍微错位，因为 jQuery 似乎根据轮播的总宽度滑动我的图像（我认为）。
这是我为您制作的测试页面，以便您更好地看到它：
http://paragraphe.org/stackoverflowdemos/slider-how-to-center-slides/
...这是我正在使用的代码，取自 WordPress 主题。我玩了一段时间并改变了一些行为，但不是我主要关心的问题。
jQuery(document).ready(function () {
jQuery("#mainholder").css("width", "100%");
jQuery("#mainindex").css("width", "100%");
jQuery("#mainholder #holder div.singleitem").css({
"margin-left": 10
});
jQuery("#mainholder #holder div.singleitem").last().addClass("last").css({
"border-right": "10px"
});
jQuery("#mainindex #imagediv img").css({
"margin-left": 0
});
jQuery("#mainindex #imagediv img").last().css({
"margin-right": 0
});
totalwidth = jQuery("#holder").width(); // Total large image width
totalimages = jQuery("#holder .singleitem").size();
totalwidth = totalwidth + (10) * (totalimages + 1);
jQuery("#holder").css({
"width": totalwidth
});
sliderwidth = 1;
jQuery("#imagediv img").each(function () {
sliderwidth = sliderwidth + parseInt(jQuery(this).attr("width")) + 1;
});
jQuery(".end").css("right", "0");
if (totalimages <= 1) {
jQuery("#mainholder").addClass("fixwidth");
jQuery("#mainholder").css("width", "960px");
jQuery("a.leftnav,a.rightnav").hide();
}
variablechange(); //for initialization before window resize is called
function variablechange() {
tempslidedist = new Array();
slidedist = new Array();
screenwidth = jQuery(window).width(); // Visible screen width
handlewidth = ((screenwidth / 10) - 6); // width of the slider handle according to the width of the screen
screenmid = (screenwidth) / 2; // Middle of visible screen
tempval = (screenmid * 10000) / (totalwidth); // The total distance the slider has moved when it reaches the middle of the screen.
mval = totalwidth * .000095; //
holdermulti = (totalwidth - screenwidth + 10) / 1000; // Multiple value with which the main images move
halfhandlewidth = handlewidth / 2;
jQuery("#imagediv").css("width", (sliderwidth) + "px");
indexwidth = (sliderwidth - handlewidth - 5);
jQuery("#index").css("width", indexwidth + "px");
divratio = (indexwidth) / 1000;
if (sliderwidth > screenwidth) {
jQuery("#index").css("margin-left", "71px");
} else {
jQuery("#index").css("margin-left", "");
}
slidespeed = (1000 / (sliderwidth)) * 95;
if (sliderwidth < (handlewidth + 10) || totalimages == 0) { //+10 is added to make the difference larger so when they are almost same, the
error doesnot takeplace
jQuery("#mainindex").hide();
jQuery(".slider-navigation a.leftnav, .slider-navigation a.rightnav").hide();
} else {
jQuery("#mainindex").show();
jQuery(".slider-navigation a.leftnav, .slider-navigation a.rightnav").show();
}
for (var i = 0; i < totalimages; i++) {
if (i == 0) {
tempslidedist[i] = ((jQuery("#imagediv img:eq(" + (i) + ")").width() - ((handlewidth + 3) / 2)) + (jQuery("#imagediv
img:eq(" + (i + 1) + ")").width() / 2) + 0);
} else {
tempslidedist[i] = (tempslidedist[i - 1] + jQuery("#imagediv img:eq(" + (i) + ")").width() / 2 + jQuery("#imagediv
img:eq(" + (i + 1) + ")").width() / 2 + 0);
}
slidedist[i] = Math.round(((tempslidedist[i])) / divratio);
}
}
jQuery(".imgexcerpt").hide();
jQuery(".imglink").mouseover(function () {
jQuery("#mainholder").addClass("disablemove");
});
jQuery(".imglink").mouseout(function () {
jQuery("#mainholder").removeClass("disablemove");
});
jQuery(".imgexcerpt").mouseover(function () {
jQuery("#mainholder").addClass("disablemove");
});
jQuery(".imgexcerpt").mouseout(function () {
jQuery("#mainholder").removeClass("disablemove");
});
jQuery(".imglink").click(function (e) { //Toggling the show/hide the img excerpt link
thisimgwidth = jQuery(this).parent().find("img").width();
if (thisimgwidth < 355) {
exceptwidth = (.85 * thisimgwidth);
} else {
exceptwidth = 340;
}
jQuery(this).parent().siblings().find(".imgexcerpt").fadeOut("fast").end().find("img").fadeTo("fast", 1).end().find(".imglink").addClass("show");
if (jQuery(this).hasClass("show")) {
jQuery(this).parent().find(".imgexcerpt").css({
"width": exceptwidth
}).fadeIn("fast");
jQuery(this).parent().find("img").fadeTo("fast", .3);
jQuery(this).removeClass("show");
} else {
jQuery(this).parent().find(".imgexcerpt").css({
"width": exceptwidth
}).fadeOut("fast");
jQuery(this).parent().find("img").fadeTo("fast", 1);
jQuery(this).addClass("show");
}
});
jQuery("#index").slider({
max: 1000,
animate: true,
step: 1,
change: ifSliderChange,
slide: ifSliderSlide
});
jQuery("#index").slider("value", (0));
jQuery("#index").css("z-index", "99");
mainfunctions(); //for initialization before window resize
function mainfunctions() {
jQuery("#index .ui-slider-handle").css("width", (handlewidth) + "px");
if (sliderwidth < screenwidth) {
jQuery("#index .ui-slider-handle").css("margin", "0 -" + (handlewidth / 2 + 3) + "px");
}
}
animating = false;
click = -1;
jQuery(".leftnav").live("click", function () {
if (!animating && !jQuery("#mainholder").hasClass("disablemove")) {
if (click >= 0) {
click--;
}
var sliderpos = jQuery("#index").slider("value");
var flag = 0;
for (var j = totalimages; j >= 0; j--) {
if ((sliderpos > slidedist[(j)]) && flag == 0) {
click = j;
flag = 1;
}
}
if (click < 0) {
jQuery("#index").slider("value", (0));
} else {
jQuery("#index").slider("value", (slidedist[click]));
}
animating = true;
}
});
jQuery(".rightnav").live("click", function () {
if (!animating && !jQuery("#mainholder").hasClass("disablemove")) {
click++;
var sliderpos = jQuery("#index").slider("value");
var flag = 0;
for (var j = 0; j < totalimages; j++) {
if ((slidedist[(j)] > sliderpos) && flag == 0) {
click = j;
flag = 1;
}
}
if (sliderpos >= 1000) {
jQuery("#index").slider("value", (0));
click = -1;
} else {
jQuery("#index").slider("value", (slidedist[click]));
}
animating = true;
}
});
jQuery(".end").css("z-index", "99");
jQuery(".start").css("z-index", "99");
jQuery(".end").click(function () {
jQuery("#index").slider("value", (1000));
});
jQuery(".start").click(function () {
jQuery("#index").slider("value", (0));
});
jQuery(window).resize(function () {
variablechange();
mainfunctions();
});
function ifSliderChange(e, ui) {
jQuery("#mainindex").animate({
scrollLeft: (((ui.value - tempval) * mval))
}, 500);
jQuery("#mainholder").animate({
scrollLeft: (ui.value * holdermulti)
}, 500, function () {
animating = false;
});
}
function ifSliderSlide(e, ui) {
jQuery("#mainholder").prop({
scrollLeft: (ui.value * holdermulti)
});
}
});
您知道一种在视口中心获取图像的方法吗？
非常感谢！