Javascript Jquery cycle plugin-从一个脚本使用cycle plugin的多个div？

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

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

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

这就是我脑子里的想法

<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>

$（文档）.ready（函数（）{
$（'#box1'）。循环（{
外汇：“淡出”，
速度:300,，
超时：0，
下一个：“#box1”，
暂停：1
});
});
$（文档）.ready（函数（）{
$（'#box2'）。循环（{
外汇：“淡出”，
速度:300,，
超时：0，
下一个：“#框2”，
暂停：1
});
});
$（文档）.ready（函数（）{
$（'#box3'）。循环（{
外汇：“淡出”，
速度:300,，
超时：0，
下一个：“#box3”，
暂停：1
});
});

身体

<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中，容器的位置为：绝对位置

我相信有一个简单的解决方案，但我已经搜索了stackoverflow和其他网站，但没有结果。非常感谢您的帮助

我举了一个例子：

它和预期的一样有效，你的也一样。可能您使用的jquery太旧了？（电流为1.8）

如果答案不适合您的问题，请编辑JSFIDLE以显示问题所在

---

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

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

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

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

---

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

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

---

一条注释：您应该在一个

$（document.ready（）

中包含所有

$（“#框”）.cycle（）

。预期的行为是什么？嗨，Luiggi。预期的行为是，每个div都有自己的图像循环。目前，我的所有图像都显示在第一个div中，直到我单击我的徽标（链接到index.html），在这种情况下，所有图像都显示在正确的div中，并正常运行循环插件。希望这是有意义的。我也做了你在上面的评论所说的！嗨，艾克托。我使用的jquery很旧，所以我将其更新为当前版本，但结果与以前相同。我在JSFIDLE中添加了一些css，并以与我的站点类似的方式放置了这些图像。也许这会有帮助？我忘了在上面提到这是一个横向网站。同样，它在firefox中每次都能完美工作，但在chrome或safari中却不行。正如jqeury看起来工作得很好一样，但当我打开页面时，所有的图像，无论它们放在哪个div中，在第一个分区中出现在每个分区的顶部。可能这是我的css的问题？不幸的是，没有…因为它当前在第一个分区中显示我的所有图像，直到我单击我的徽标（链接到index.html），在这种情况下，所有图像都以正确的分区显示，并运行循环插件。我对此感到困惑。你能重复一遍这个问题吗？我在Fiddle中没有看到徽标我尝试了新的简化代码。它甚至没有部分运行插件，这很奇怪，因为我可以看到它在小提琴上工作。我用更多的html和css更新了[TheFiddle]（），看看你是否能发现错误，尽管我在w3学校进行了测试，结果很好。我使用了最后一个有效的脚本。我的问题是，当我加载页面时，来自循环插件的所有图像在单独的div中都在第一个div中相互重叠，但当我单击链接到index.html的徽标时，整个页面工作正常，图像返回到正确的div。

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