0

我想在一页上制作几个(超过 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>

提前致谢!

4

1 回答 1

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>
于 2012-09-18T08:45:15.447 回答