0

我正在尝试循环播放此动画,但我不知道为什么它不起作用?我有 4 个带有差异图像的 div,我想循环播放它以一次又一次地重播。

$(document).ready(function () {
    setInterval("comeon()", 2000);
});

function comeon() {
    var current = $(".current");
    var next = current.next();

    if (next.length == 0) {
        next = $(".current:first");
    }

    current.removeClass('current').addClass('previous');
    next.css("opacity", "0.0").addClass("current").animate({
        opacity: 1.0
    }, 500, function () {
        current.removeClass("previous");
        comeon();
    });

我做错了什么?

**UPDATE**



<div id="slider">
<div class="current" style="background-color:#F00;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#00F;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#0F0;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#FF3;position:absolute; width:400px; height:400px;"></div>

</div><!-- End slider-->

请看一下http://jsfiddle.net/7kt9z/6/

4

2 回答 2

1
next = $("cur:first");

这是试图选择一个像<cur>. 哎呀!

你要:

next = $(".current:first");

或者

next = cur.first();

编辑

我终于明白你需要什么了:

next = current.siblings().first();
于 2013-09-23T18:09:11.440 回答
0

setInterval 需要以某种方式使用。

您需要将 setInterval 分配给变量,并且此分配应附加到事件。

var setIt;
$(window).load(function() {
    setIt = setInterval(comeOn, 1000);
});

由于您使用的是图像,因此您可以等待所有图像加载,然后启动滑块(即使用load事件分配setInterval给变量setIt)。

此外,不要将函数包装在 qoutes 中setInterval。代替:

setInterval("comeOn()", 1000)

做这个:

setInterval(comeOn, 1000)

我在这里有一个工作示例:http: //codepen.io/anon/pen/rHzpL

于 2013-09-23T18:50:14.717 回答