jQuery 幻灯片位置错误

Question

我已经遵循 jQuery for Designers 教程，了解如何创建类似于 Coda 的滑块。

不管怎样，它第一次起作用了，除了一件事之外，它还很棒。最后一个面板的位置似乎总是在错误的地方。这是我正在使用的代码（顺便说一句，这是本地 WordPress 安装，所以我无法向您展示工作示例）：

<div id="carousel">
<div class="scroll">
    <div class="scrollContainer">
        <p class="panel" id="slide1">Guerrilla marketing solutions that will blow your mind into a thousand million pieces and then earn you <span>shit loads of money</span>.</p>
        <p class="panel" id="slide2">Guerrilla marketing solutions that will blow your mind into a thousand million pieces and then earn you <span>shit loads of money</span>.</p>
        <p class="panel" id="slide3">Guerrilla marketing solutions that will blow your mind into a thousand million pieces and then earn you <span>shit loads of money</span>.</p>
        <p class="panel" id="slide4">Guerrilla marketing solutions that will blow your mind into a thousand million pieces and then earn you <span>shit loads of money</span>.</p>
        <p class="panel" id="slide5">Guerrilla marketing solutions that will blow your mind into a thousand million pieces and then earn you <span>shit loads of money</span>.</p>
    </div><!--/scrollContainer-->
</div><!--/scroll-->
<ul>
    <li><a href="#slide1">1</a></li>
    <li>/</li>
    <li><a href="#slide2">2</a></li>
    <li>/</li>
    <li><a href="#slide3">3</a></li>
    <li>/</li>
    <li><a href="#slide4">4</a></li>
    <li>/</li>
    <li><a href="#slide5">5</a></li>
</ul>
<a href="<?php bloginfo('url');?>/contact/" title="Get in Touch" id="carouselCTA"><img src="<?php bloginfo('template_directory');?>/images/get-in-touch-button.png" alt="Get in Touch Button" /></a>

// bind the navigation clicks to update the selected nav:
$('#carousel ul').find('a').click(selectNav);

// handle nav selection - lots of nice chaining :-)
function selectNav() {
  $(this)
    .parents('ul:first') // find the first UL parent
      .find('a') // find all the A elements
        .removeClass('selected') // remove from all
      .end() // go back to all A elements
    .end() // go back to 'this' element
    .addClass('selected');
}

function trigger(data) {
  // within the .navigation element, find the A element
  // whose href ends with ID ($= is ends with)
  var el = $('#carousel ul').find('a[href$="' + data.id + '"]').get(0);

  // we're passing the actual element, and not the jQuery instance.
  selectNav.call(el);
}

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1)});
} else {
  $('#carousel ul a:first').click();
}   

// when the DOM is ready...
$(document).ready(function () {

var $panels = $('#carousel .scrollContainer > p');
var $container = $('#carousel .scrollContainer');

// if false, we'll float all the panels left and fix the width 
// of the container
var horizontal = true;

// float the panels left if we're going horizontal
if (horizontal) {
  $panels.css({
    'float' : 'left',
    'position' : 'relative' // IE fix to ensure overflow is hidden
  });

  // calculate a new width for the container (so it holds all panels)
  $container.css('width', $panels[0].offsetWidth * $panels.length);
}

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#carousel .scroll').css('overflow', 'hidden');


// handle nav selection
function selectNav() {
  $(this)
    .parents('ul:first')
      .find('a')
        .removeClass('selected')
      .end()
    .end()
    .addClass('selected');
}

$('#carousel ul').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
  var el = $('#carousel ul').find('a[href$="' + data.id + '"]').get(0);
  selectNav.call(el);
}

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1) });
} else {
  $('ul a:first').click();
}

// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset.  Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ? 
  $container.css('paddingTop') : 
  $container.css('paddingLeft')) 
  || 0) * -1;


var scrollOptions = {
  target: $scroll, // the element that has the overflow

  // can be a selector which will be relative to the target
  items: $panels,

  navigation: 'ul a',

  // selectors are NOT relative to document, i.e. make sure they're unique
 // prev: 'img.left', 
  //next: 'img.right',

  // allow the scroll effect to run both directions
  axis: 'xy',

  onAfter: trigger, // our final callback

  offset: offset,

  // duration of the sliding effect
  duration: 500,

  // easing - can be used with the easing plugin: 
  // http://gsgd.co.uk/sandbox/jquery/easing/
  easing: 'swing'
};

// apply serialScroll to the slider - we chose this plugin because it 
// supports// the indexed next and previous scroll along with hooking 
// in to our navigation.
$('#carousel').serialScroll(scrollOptions);

// now apply localScroll to hook any other arbitrary links to trigger 
// the effect
$.localScroll(scrollOptions);

// finally, if the URL has a hash, move the slider in to position, 
// setting the duration to 1 because I don't want it to scroll in the
// very first page load.  We don't always need this, but it ensures
// the positioning is absolutely spot on when the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);

});

jQuery 还使用scrollTo、localScroll 和serialScroll 插件。

任何帮助将不胜感激。只是为了衡量，这里也是我正在使用的 CSS：

div.scroll {
    position:relative;
    overflow:auto;
    float:left;
    width:535px;
    height:135px;
}

.scrollContainer p.panel {
    width:535px;
    height:135px;
    font-size:32px;
    color:#fff;
}

#carousel p span {
    color:#ffc411;
}

#carousel ul {
    float:right;
    text-transform:uppercase;
    color:#b6b6b6;
}

#carousel li {
    float:left;
    margin:0 0 0 10px;
}

#carousel li a {
    color:#fff;
    text-decoration:none;
}

#carousel li a:hover, #carousel li a.selected {
    color:#b6b6b6;
}

Answer 1

这确实有点愚蠢。我没有让 Cufon 定位 #carousel 的子级，而是让它定位 #carousel 本身，因此它不只是将样式应用于自身，而是将其应用于 DIV。当然，这意味着在轮播下方添加了一个画布标签。

仅将 Cufon 应用于文本元素、子元素。

Answer 2

我认为你的错误源于CSS。
尝试更改此设置：

#carousel li {
    float:left;
    margin:0 0 0 10px;
}

如果

#carousel li {
    float:left;
    margin:0;
}

有效，您始终可以在每张幻灯片内创建一个 div，其左边距为 10px。