Jquery 循环插件 - 一个脚本中带有循环插件的多个 div？

Question

我是 jquery/javascript 新手，需要帮助！

我想在多个 div 中使用循环插件，每个 div 中有不同的图像。每个 div 大小相同，每个图像大小相同。

到目前为止，我使用的代码显示了第一个 div 中的所有图像，但是当我单击我的徽标（链接到 index.html）时，所有图像突然出现在适当的位置并与循环插件一起使用。

这就是我的想法

<script type="text/javascript" src="js/jquery-1.3.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#box1').cycle({ 
                        fx:     'fade', 
                       speed:   300, 
                       timeout: 0, 
                       next:   '#box1', 
                       pause:   1  
                });
            });

            $(document).ready(function(){
                $('#box2').cycle({ 
                        fx:     'fade', 
                       speed:   300, 
                       timeout: 0, 
                       next:   '#box2', 
                       pause:   1  
                });
            });

            $(document).ready(function(){
                $('#box3').cycle({ 
                        fx:     'fade', 
                       speed:   300, 
                       timeout: 0, 
                       next:   '#box3', 
                       pause:   1  
                });
            });
        </script>

身体...

<div id="container">


            <div id="box1" class="box">
            <img src="images/car.jpg" alt="images/car.jpg"/>
            <img src="images/van.jpg" alt="images/van.jpg"/>
            </div>


            <div id="box2" class="box">
            <img src="images/bottle.jpg" alt="images/bottle.jpg"/>
            <img src="images/pattern.jpg" alt="images/pattern.jpg"/>
            </div>

            <div id="box3" class="box">
            <img src="images/car.jpg" alt="images/car.jpg"/>
            <img src="images/van.jpg" alt="images/van.jpg"/>
            </div>
    </div>

在 css 中容器是 position: absolute;

我确信有一个简单的解决方案，但我搜索了 stackoverflow 和其他网站都无济于事。非常感谢任何帮助！！！！

Answer 1

我做了这个例子：

http://jsfiddle.net/oceog/YHLz2/11/

$(function() {
    $('.box').each(function() {
        var $this = $(this);
        $this.cycle({
            fx: 'fade',
            speed: 300,
            timeout: 0,
            next: $this,
            pause: 1
        });
    });
});​

它按预期工作，你的也是。可能是你使用太旧的 jquery 吗？ （当前为 1.8）

如果答案不适合您的问题，您能否编辑 jsfiddle 以显示问题所在？

---

• 当我加载页面时
• 当我点击我的徽标时，链接到 index.html

我认为加载页面时加载的不是 index.html，而是 index.htm，或 index.php 或其他内容，请检查您的站点目录

jsfiddle 应该重复你的问题，而不仅仅是显示你的结构

如果您的网站在互联网上 - 给我链接，我会检查

---

尝试将您的代码更改为以下内容：

   $(document).load(function() {
    $('.box').each(function() {
        var $this = $(this);
        $this.cycle({
            fx: 'fade',
            speed: 300,
            timeout: 0,
            next: $this,
            pause: 1
        });
    });
});​