jQuery滑入錯誤位置

Question

我在jQuery for Designers上設置了followed the tutorial以瞭解如何創建類似於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; 
} 

如果一切正常，你總是可以讓每一張幻燈片，有一個10px的左邊距內一個div。