对于我的网站，我正在尝试进行水平导航。 导航适用于插件jQuery.serialScroll，但是我无法确保选中的项目是居中的，特别是当不同的项目具有不同的宽度时。
我可以更改偏移量，但是整个幻灯片显示会改变，而不是单个项目。
<script type="text/javascript">
jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
};
jQuery(function( $ ){
$('article').serialScroll({
items:'section',
prev:'nav #prev',
next:'nav #next',
start:0, //as we are centering it, start at the 2nd
duration:1000,
offset:-240,
force:true,
stop:true,
lock:false,
cycle:false, //don't pull back once you reach the end
easing:'easeOutQuart', //use this easing equation for a funny effect
jump: true //click on the images to scroll to them
});
$(document).keyup(function(e){
switch( e.keyCode ){
case 39://right (->)
$('article').trigger('next');
break;
case 37://left (<-)
$('article').trigger('prev');
break;
}
});
});
</script>
这是HTML：
<article>
<div>
<section id="page-1">
<p>Maecenas nisl lacus, pharetra id dapibus a, commodo et justo. Quisque commodo cursus risus in convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dictum sollicitudin enim non placerat. Nullam a pretium urna. Morbi fermentum venenatis eleifend. Nulla sit amet risus et justo convallis fringilla ut sed neque. In hac habitasse platea dictumst. Integer eleifend tellus sed nulla ullamcorper non sollicitudin turpis sagittis. Cras dui dolor, cursus non dignissim et, tristique quis est.<br/>
Duis vel diam vitae libero adipiscing iaculis ac eget lorem. Nulla nec ante justo. Pellentesque augue magna, blandit id sollicitudin et, iaculis vel nibh. Nullam non arcu quis mi luctus lobortis. Phasellus sed ante quam, at dictum odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus nunc odio, fringilla quis luctus ac, aliquet ut erat. Mauris interdum eleifend nunc non semper. Aenean placerat aliquet odio at pellentesque. Donec placerat volutpat dolor non malesuada. Suspendisse tincidunt tellus eu ligula porttitor quis faucibus velit convallis. Donec semper, dui iaculis imperdiet rutrum, enim odio fringilla eros, in euismod mauris metus sit amet augue. Mauris adipiscing feugiat ante, vel lobortis quam consectetur at. In hac habitasse platea dictumst. Duis volutpat dolor eget massa accumsan ac pulvinar dolor faucibus. Praesent ultricies, lectus eu cursus cursus, augue mauris fringilla enim, in euismod arcu lorem eu libero. Nam vel fermentum purus. Suspendisse vulputate pharetra nibh nec rutrum. Integer luctus condimentum turpis, tristique sodales tellus blandit sit amet. </p>
</section>
<section id="page-2">
<p>Maecenas nisl lacus, pharetra id dapibus a, commodo et justo. Quisque commodo cursus risus in convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dictum sollicitudin enim non placerat. Nullam a pretium urna. Morbi fermentum venenatis eleifend. Nulla sit amet risus et justo convallis fringilla ut sed neque. In hac habitasse platea dictumst. Integer eleifend tellus sed nulla ullamcorper non sollicitudin turpis sagittis. Cras dui dolor, cursus non dignissim et, tristique quis est.<br/>
Duis vel diam vitae libero adipiscing iaculis ac eget lorem. Nulla nec ante justo. Pellentesque augue magna, blandit id sollicitudin et, iaculis vel nibh. Nullam non arcu quis mi luctus lobortis. Phasellus sed ante quam, at dictum odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus nunc odio, fringilla quis luctus ac, aliquet ut erat. Mauris interdum eleifend nunc non semper. Aenean placerat aliquet odio at pellentesque. Donec placerat volutpat dolor non malesuada. Suspendisse tincidunt tellus eu ligula porttitor quis faucibus velit convallis. Donec semper, dui iaculis imperdiet rutrum, enim odio fringilla eros, in euismod mauris metus sit amet augue. Mauris adipiscing feugiat ante, vel lobortis quam consectetur at. In hac habitasse platea dictumst. Duis volutpat dolor eget massa accumsan ac pulvinar dolor faucibus. Praesent ultricies, lectus eu cursus cursus, augue mauris fringilla enim, in euismod arcu lorem eu libero. Nam vel fermentum purus. Suspendisse vulputate pharetra nibh nec rutrum. Integer luctus condimentum turpis, tristique sodales tellus blandit sit amet. </p>
</section>
<section id="page-3">
<p>Maecenas nisl lacus, pharetra id dapibus a, commodo et justo. Quisque commodo cursus risus in convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dictum sollicitudin enim non placerat. Nullam a pretium urna. Morbi fermentum venenatis eleifend. Nulla sit amet risus et justo convallis fringilla ut sed neque. In hac habitasse platea dictumst. Integer eleifend tellus sed nulla ullamcorper non sollicitudin turpis sagittis. Cras dui dolor, cursus non dignissim et, tristique quis est.<br/>
Duis vel diam vitae libero adipiscing iaculis ac eget lorem. Nulla nec ante justo. Pellentesque augue magna, blandit id sollicitudin et, iaculis vel nibh. Nullam non arcu quis mi luctus lobortis. Phasellus sed ante quam, at dictum odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus nunc odio, fringilla quis luctus ac, aliquet ut erat. Mauris interdum eleifend nunc non semper. Aenean placerat aliquet odio at pellentesque. Donec placerat volutpat dolor non malesuada. Suspendisse tincidunt tellus eu ligula porttitor quis faucibus velit convallis. Donec semper, dui iaculis imperdiet rutrum, enim odio fringilla eros, in euismod mauris metus sit amet augue. Mauris adipiscing feugiat ante, vel lobortis quam consectetur at. In hac habitasse platea dictumst. Duis volutpat dolor eget massa accumsan ac pulvinar dolor faucibus. Praesent ultricies, lectus eu cursus cursus, augue mauris fringilla enim, in euismod arcu lorem eu libero. Nam vel fermentum purus. Suspendisse vulputate pharetra nibh nec rutrum. Integer luctus condimentum turpis, tristique sodales tellus blandit sit amet. </p>
</section>
</div>
</article>
如果我需要更改插件或其他建议，请告诉我！
非常感谢你！
答案 0 :(得分：0)
我终于找到了解决方案。 事实上，你不应该指望抵消，而应该依靠利润。因此，将margin：true设置为true，并使用您的css确保每个项目上的margin-left对应于使项目居中的宽度。然后，将前一项的右边距更改为负值，以确保该项正确地跟随第一项。