Question

所以，我有这3个标签部分显示和隐藏onClick，但现在我希望它们也像幻灯片一样，如果用户没有点击任何地方。

以下是我所拥有的：



$(document).ready(function() {
    function rClass() {
        $('.slide_1_link').removeClass('on');
        $('.slide_2_link').removeClass('on');
        $('.slide_3_link').removeClass('on');
    }
    function rFadeOut() {
        $('.slide_1').fadeOut();
        $('.slide_2').fadeOut();
        $('.slide_3').fadeOut();

        $('.slide_content_1').fadeOut();
        $('.slide_content_2').fadeOut();
        $('.slide_content_3').fadeOut();
    }
    $('.slide_1_link').click(function(){
        rClass();
        rFadeOut();
        $('.slide_1_link').addClass('on');
        $('.slide_1').fadeIn();
        $('.slide_content_1').fadeIn();
    });
    $('.slide_2_link').click(function(){
        rClass();
        rFadeOut();    
        $('.slide_2_link').addClass('on');
        $('.slide_2').fadeIn();
        $('.slide_content_2').fadeIn();
    });
    $('.slide_3_link').click(function(){
        rClass();
        rFadeOut();
        $('.slide_3_link').addClass('on');
        $('.slide_3').fadeIn();
        $('.slide_content_3').fadeIn();
    });

});

$(document).ready(function() { function rClass() { $('.slide_1_link').removeClass('on'); $('.slide_2_link').removeClass('on'); $('.slide_3_link').removeClass('on'); } function rFadeOut() { $('.slide_1').fadeOut(); $('.slide_2').fadeOut(); $('.slide_3').fadeOut(); $('.slide_content_1').fadeOut(); $('.slide_content_2').fadeOut(); $('.slide_content_3').fadeOut(); } $('.slide_1_link').click(function(){ rClass(); rFadeOut(); $('.slide_1_link').addClass('on'); $('.slide_1').fadeIn(); $('.slide_content_1').fadeIn(); }); $('.slide_2_link').click(function(){ rClass(); rFadeOut(); $('.slide_2_link').addClass('on'); $('.slide_2').fadeIn(); $('.slide_content_2').fadeIn(); }); $('.slide_3_link').click(function(){ rClass(); rFadeOut(); $('.slide_3_link').addClass('on'); $('.slide_3').fadeIn(); $('.slide_content_3').fadeIn(); }); });

有人知道一个好的计时器插件或实现该功能的简单方法吗？

感谢您的时间！

Answer 1

您可以编写一个函数来依次触发三个链接上的点击事件，然后使用setInterval将其设置为每5秒运行一次，如下所示：

var cycleIndex = 0;

function cycle() {
    var index = cycleIndex % 3;
    $('.slide_' + (index + 1) + '_link').click();
    cycleIndex += 1;
}

setInterval(cycle, 5000);

Answer 2

通过jquery显示/隐藏或淡化/淡出div有延迟功能，通过它可以为该动画添加计时器

$("button").click(function() {
  $("div.first").slideUp(300).delay(800).fadeIn(400);
  $("div.second").slideUp(300).fadeIn(400);
});

检查以下链接http://api.jquery.com/delay/

jQuery Show和Hide计时器

2 个答案: