Question

尝试使用jQuery serialScroll构建HTML幻灯片的幻灯片。但是，如果我的幻灯片包含与我正在尝试滚动的元素匹配的嵌套元素，那么它的行为有点奇怪。

有没有办法将CSS类用作选择器项而不是HTML元素？

以下是我见过的典型用法示例：

$('#screen').serialScroll({
    target:'#sections',
    items:'li',
    prev:'img.prev',
    next:'img.next',
    navigation:'#navigation li a',
    duration:700,
    force:true,
    step:1,
    interval:1000
});

我想做以下（注意：用作项目值的CSS类）：

$('#screen').serialScroll({
    target:'#sections',
    items:'.mycssclass',
    prev:'img.prev',
    next:'img.next',
    navigation:'#navigation li a',
    duration:700,
    force:true,
    step:1,
    interval:1000
});

在上面的示例中，如果您将.mycssclass附加到列表项元素并且在幻灯片HTML中嵌套了更多列表项，则幻灯片将以奇数方向反弹。

我的标记看起来像这样：

<div id="screen">
<div id="sections">
 <ul>
  <li class="mycssclass">
   <h2>Section 1</h2>
    <ul>
      <li>Nest li</li>
    </ul>
   <p>Lorem ipsum dolor sit amet...</p>
  </li>
  <li class="mycssclass">
   <h2>Section 2</h2>
    <ul>
      <li>Nest li</li>
    </ul>
   <p>Lorem ipsum dolor sit amet...</p>
  </li>
 </ul>
</div>
</div>

Answer 1

items已经选择了一个选择器，它在这里使用：

function getItems(){
  return $( items, pane );
};

所以...只需在问题中使用您想要的内容，它就会在.mycssclass中找到任何#screen元素，相当于：

$(".mycssclass", "#screen")
//or..
$("#screen").find(".mycssclass")

如何在serialScroll中将CSS类用作具有嵌套HTML元素的选择器项？

1 个答案: