Question

我需要制作幻灯片，就像在这里：http://www.xo.com

我已经尝试在三个div上使用jquery循环插件，它们具有不同的宽度，并且所有三个div中的一个id也有，但是一段时间后这些开始滑动arbitaray，我需要三个div滑动像电影条和xo.com一样。

请帮忙。

所有divs必须具有相同的图像，只是为了给它一个幻灯片的印象。如果有人有更好的想法，那就非常欢迎。

下面是用我循环图像的代码，但它们会在一段时间后同步。

$('.images').cycle({
        fx: 'scrollHorz',
    })

<div style="width:160px;float: left; overflow: hidden;">
<div class="images">
    <img src="images/slides/1.jpg">
    <img src="images/slides/2.jpg">
    <img src="images/slides/3.jpg">
    <img src="images/slides/4.jpg">
    <img src="images/slides/5.jpg">
    <img src="images/slides/6.jpg">
    <img src="images/slides/7.jpg">
</div>
</div>

<div class="width: 1024px;overflow: hidden;float: left;">
<div class="images">
    <img src="images/slides/1.jpg">
    <img src="images/slides/2.jpg">
    <img src="images/slides/3.jpg">
    <img src="images/slides/4.jpg">
    <img src="images/slides/5.jpg">
    <img src="images/slides/6.jpg">
    <img src="images/slides/7.jpg">
</div>
</div>

<div class="width: 160px;overflow: hidden;float: left;">
<div class="images">
    <img src="images/slides/1.jpg">
    <img src="images/slides/2.jpg">
    <img src="images/slides/3.jpg">
    <img src="images/slides/4.jpg">
    <img src="images/slides/5.jpg">
    <img src="images/slides/6.jpg">
    <img src="images/slides/7.jpg">
</div>
</div>

Answer 1

3个重复的<div class="images">块可能是你的图像最终踩到彼此脚趾的原因。请记住，<img>元素是表示图像的元素，<div>是包含这些图像的块。

尝试在我删除所有复制的位置下面运行我的代码。看看他们是否做你想做的事。

(function($){
  $('#slideshow-1').cycle({
    fx: 'scrollHorz',
    speed: 300,
    timeout: 2000
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>

<div id="slideshow-1">
  <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
  <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
  <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
  <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
  <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
</div>

幻灯片显示三个div像幻灯片使用jquery帮助需要

1 个答案: