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中，容器的位置是：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
        });
    });
});

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

1 个答案: