Question

我一直试图通过旋转文章来简化用户的首页。我已经使用Learncode Academy的基本思想来构建一个静态菜单/文章选择，但我真正希望能够做的是循环阅读文章，主要是通过模拟按键（即下一个按钮））说每5000 mS。主要的javascript是`$（function（）{

        $('.tab-boxes .tabs li').on('click', hidePanel);
        var boxToShow;

        function hidePanel () {
            var $box = $(this).closest('.tab-boxes');
            $box.find('.tabs li.active').removeClass('active');
            $(this).addClass('active');
            var boxToShow = $(this).attr('rel'); 
            $box.find('.box.active').fadeOut(300, showNextPanel);

        function showNextPanel(){
            $(this).removeClass('active');
            $("#"+boxToShow).fadeIn(300, function(){
                $(this).addClass('active');
                });   
            }
        }; 

        function changePanel () {
            var nextPanel = $box.next(); 
            hidePanel (nextbox);
        }    
    });`

所以具体来说，如果没有按键发生，我想拿起当前的活动面板并触发下一个（如果它是最后一个，则触发第一个）。我尝试了各种淡入淡出

function transitionBox(from, to) {
    function next() {
        var nextTo;
        if (to.is(":last-child")) {
            nextTo = to.closest(".tab-boxes").children("div").first();
        } else {
            nextTo = to.next();
        }
        to.fadeIn(500, function () {
            setTimeout(function () {
                transitionBox(to, nextTo);
            }, 3000);
        });
    }

但是我无法让它发挥作用 - 任何人都有任何好主意来帮助我？

Answer 1

我知道setTimeout在递归方面有问题，如果你想调用常规的东西你应该使用setInterval。

http://www.w3schools.com/jsref/met_win_setinterval.asp

Answer 2

我尝试分析您的代码并尝试使其正常工作，但我无法做到。

所以我为此编写了全新的代码。

http://jsfiddle.net/p511safe/10/

$(document).ready(function(){

    $(".tabs li").click(function(){
        clearInterval(myInterval);
        openTab($(this));
        loopThroughTabs();
    });

    function openTab(tabLiObject)
    {
        if(!$(tabLiObject).hasClass("active"))
        {
            var oldSelectedLi = $(".tabs li.active");
            var oldPanelDivId = oldSelectedLi.attr("rel");
            oldSelectedLi.removeClass("active");
            $("#"+oldPanelDivId).removeClass("active").hide();

            $(tabLiObject).addClass("active");
            var newPanelDivId = $(tabLiObject).attr("rel");
            $("#"+newPanelDivId).removeClass("active");
            $("#"+newPanelDivId).fadeIn(500);
        }

    }
    var myInterval = null;

    function goToTab(fromFirst)
    {
        var currentLIIndex = $(".tabs li.active").index();
        var nextTabIndex = currentLIIndex+1;
        if(nextTabIndex > 3)
        {
            openTab($(".tabs li").first());
        }
        else
        {
            openTab($(".tabs li:eq("+nextTabIndex+" )" ));
        }

    }
    goToTab();

    function loopThroughTabs(){
        myInterval = setInterval(function(){
            goToTab();
        },2000);
    }
    loopThroughTabs();
});

希望这会对你有所帮助。

模拟单击事件以将div旋转为可见

2 个答案: