Question

我在设计师的jQuery上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;
}

如果有效，你可以在每张幻灯片中制作一个div，左边距为10px。

jQuery滑入错误的位置

2 个答案: