每个div的jquery循环

Question

我想在一个页面上制作几个(超过12个)幻灯片，这将在鼠标悬停动画。现在只有第一个div是动画的。下面是我的代码：

jQuery:

$(document).ready(function() {
  $('#reference').each(function() {
    $(this).cycle({
      speed:      200, 
      //timeout:     0, 
      fx:     'fade',
    });
  });
});

HTML:

<div class="columns-3">
    <div class="column firstCol">
        <div class="columns-3-Content">
            <div id="reference">
                <img src="images/img1.png" />
                <img src="images/img2.png" />
            </div>
        </div>
    </div>
    <div class="column">
        <div class="columns-3-Content">
            <div id="reference">
                <img src="images/img1.png" />
                <img src="images/img2.png" />
            </div>
        </div>
    </div>
    <div class="column lastCol">
        <div class="columns-3-Content">
            <div id="reference">
                <img src="images/img1.png" />
                <img src="images/img2.png" />
            </div>
        </div>
    </div>
</div>
<div style="clear:both;"></div>

提前感谢！

Answer 1

您应该传递一个类，而不是唯一的div ID。jQuery：

$(document).ready(function() {
  $('.reference').each(function() {
    $(this).cycle({
      speed:      200, 
      //timeout:     0, 
      fx:     'fade',
    });
  });
});

编辑(作者: Gerald Schneider : )：

您还可以执行以下操作：

$('.reference').cycle({ speed: 200, fx: 'fade' });

HTML：

<div class="columns-3">
    <div class="column firstCol">
        <div class="columns-3-Content">
            <div class="reference">
                <img src="images/img1.png" />
                <img src="images/img2.png" />
            </div>
        </div>
    </div>
    <div class="column">
        <div class="columns-3-Content">
            <div class="reference">
                <img src="images/img1.png" />
                <img src="images/img2.png" />
            </div>
        </div>
    </div>
    <div class="column lastCol">
        <div class="columns-3-Content">
            <div class="reference">
                <img src="images/img1.png" />
                    <img src="images/img2.png" />
            </div>
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>