0

我正在使用 David De Sandro 的 jQuery Isotope 插件开发一个单页网站。在 7 Isotope 元素中，我以基本方式运行 Cycle 幻灯片插件（无点击、分页、暂停、悬停等）。它有效 - 但我怀疑我没有很有效地实现这一点。

HTML（7 种同位素元素之一）

<div class="content">
  <div class="slideshow preview1">
  <img src="media/cl_t_preview_0.jpg" />
  <img src="media/cl_t_preview_1.jpg" />
  <img src="media/cl_t_preview_2.jpg" />
  </div>
</div> // and 6 more...

CSS（适用于所有 7 个幻灯片）

.slideshow.preview1, .slideshow.preview2, .slideshow.preview3, .slideshow.preview4, .slideshow.preview5, .slideshow.preview6, .slideshow.preview7 {
position: relative;
overflow: hidden;
height: 252px;
width: 252px;
}
.slideshow.preview1 img, .slideshow.preview2 img, .slideshow.preview3 img, .slideshow.preview4 img, .slideshow.preview5 img, .slideshow.preview6 img, .slideshow.preview7 img {
display: block;
}

JS（7 个实例 - 这是重复且无效的）

$(document).ready(function() {

    $('.slideshow.preview1').cycle({
    fx: 'scrollHorz',
    random: 1,
    speed: 300,
    timeout: 6000,
    delay: -1000
});
    $('.slideshow.preview2').cycle({
    fx: 'scrollHorz',
    random: 1,
    speed: 300,
    timeout: 6000,
    delay: -2000
}); // and five more calls...
});

那么，我怎样才能使 JS 部分比我现在做的那样顽固地重复 7 次更有效呢？不知何故，我应该只传递类名和 7 个不同的延迟值......

在这里，Michael Malsup 使用了一种带有表格的技术（我不明白）通过 HTML 本身传递必要的参数。这是最好的方法吗？我刚刚看到了 HTML5 数据属性的使用；也许这是删除我的 JS 冗余的最佳实践方式？

<div class="content">
  <div class="slideshow preview" data-delay="-2000"> // each occurrence has its own delay
      <img src="media/prevslide_3.jpg" alt="Img 1" />
      <img src="media/prevslide_4.jpg" alt="Img 2" />
      <img src="media/prevslide_5.jpg" alt="Img 3" />
  </div>
</div>

$('.slideshow.preview').cycle({ // and the call needs to occur only once
fx: 'scrollHorz',
random: 1,
speed: 300,
timeout: 6000,
delay: -2000 // but how to pass the data-delay value in here?
});

非常感谢您！

4

0 回答 0