2

我编写了一个简单的函数，它使用淡入/淡出效果转换三个 div 元素。当用户单击链接时触发该事件。这是我的代码：

$(".link1").click(function () {
   $(".feature1").fadeIn(1000);
   $(".feature2").fadeOut(1000);
   $(".feature3").fadeOut(1000);
});

$(".link2").click(function () {
   $(".feature1").fadeOut(1000);
   $(".feature2").fadeIn(1000);
   $(".feature3").fadeOut(1000);
});

$(".link3").click(function () {
   $(".feature1").fadeOut(1000);
   $(".feature2").fadeOut(1000);
   $(".feature3").fadeIn(1000);
});

我需要能够设置某种计时器，以便这些转换每 8 秒左右自动发生一次。我还希望它们本质上“循环”，这样如果我们到达集合中的第三个 div，它就会返回到第一个 div。

4

4 回答 4

2

你的意思是这样的吗？

setInterval(myFunction,8000);

javascript 中的 setInterval 函数每隔（在这种情况下）在其第二个参数中设置的 8 秒运行一个函数。调用函数时，您会注意到没有括号。

您还可以像这样调用匿名函数：

setInterval(function(){alert("Hello")},3000);

如果您希望能够通过点击事件来控制它，您可以执行以下操作：

var loop;
$(elem).click(function(){
    loop = setInterval(fades,8000);
});

function fades(){
    $(".feature1").fadeOut(1000);
    $(".feature2").fadeIn(1000);
    $(".feature3").fadeOut(1000);
}

你可以这样停止循环：clearInterval(loop);

于 2012-08-16T06:15:14.627 回答
1

http://jsfiddle.net/F4X46/1/

var i = 1,
    t;

function makeTO() {
    t = setTimeout(function() {
        console.log('test');
        if (i++ === 3) {
            i = 1;
        }
        $(".link" + i).trigger('click');
    }, 8000);
}
$(".link1").click(function() {
    i = 1;
    clearTimeout(t);
    makeTO();
    $(".feature1").fadeIn(1000);
    $(".feature2").fadeOut(1000);
    $(".feature3").fadeOut(1000);
});

$(".link2").click(function() {
    i = 2;
    clearTimeout(t);
    makeTO();
    $(".feature1").fadeOut(1000);
    $(".feature2").fadeIn(1000);
    $(".feature3").fadeOut(1000);
});

$(".link3").click(function() {
    i = 3;
    clearTimeout(t);
    makeTO();
    $(".feature1").fadeOut(1000);
    $(".feature2").fadeOut(1000);
    $(".feature3").fadeIn(1000);
});
makeTO();
于 2012-08-16T06:15:50.227 回答
0

我已经尝试过一些东西。请参阅工作演示

HTML

<a class="link1" href="javascript:void(0)"> Link1 </a>
<a class="link2" href="javascript:void(0)" > Link2 </a>
<a class="link3" href="javascript:void(0)" > Link3 </a>
<div class="feature1">Feature1 div</div>
<div class="feature2">Feature2 div</div>
<div class="feature3">Feature3 div</div>​

CSS

a { font:bold 13px verdana; padding:4px}
div { border:1px solid grey; padding:3px;width:150px;height:90px;margin:3px;}
.feature1 { background-color: #f00; }
.feature2 { background-color: #0f0; }
.feature3 { background-color: #00f; }​

jQuery

(function () {
    var i =0;
    var doFade= function() {        
        i = (i%3)+1;
        //console.log(i);
        $("div[class^=feature]").fadeOut(1000);
        $('.feature'+i+'').fadeIn(1000);                
    };
    doFade();
    window.setInterval(doFade, 2000);
})();​
于 2012-08-16T07:10:06.250 回答
0

对于 jQuery 中的计时问题，请使用插件jquery-timing。

在 jQuery 中选择所有 .feature*，然后：

$(".feature1,.feature2,.feature3").repeat()
    .each($).fadeIn(1000).siblings().fadeOut(1000).wait(3000).all()

好的。不是吗？

看到这个在jsfiddle上运行。

于 2012-08-21T10:29:51.080 回答