Question

我正在使用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个不同的延迟值......

Here 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?
});

非常感谢你！

jQuery Cycle插件 - 一页网站上的多个简单幻灯片/实例

0 个答案: