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>

每个div的jquery循环

1 个答案: