javascript - 在不点击的情况下，每隔几秒执行一次代码，在点击的情况下，直接执行代码。

Question

用jquery写，
在不点击的情况下，每隔几秒隐藏当前p,显示下一个p，并开始下一个p的倒计时

例如在不点击的情况下，5秒后pager1设置为display:none;，并且pager2设置为display:block;，同时pager2开始5秒倒计时（但并非每次倒计时都是5秒，也有可能下一个是6秒倒计时，下下个是10秒倒计时）

然后在点击的情况下，清除当前（就是被设置为display:none;的）p的定时器，立即将pager1设置为display:none;，并且pager2设置为display:block;，同时pager2开始5秒倒计时

<p id="pager1">
    <button id="next1">下一题</button>
</p>
<p id="pager2" style="display:none;">
    <button id="next2">下一题</button>
</p>
<p id="pager3" style="display:none;">
    <button id="next3">下一题</button>
</p>
<p id="pager4" style="display:none;">
    <button id="next4">下一题</button>
</p>
<p id="pager5" style="display:none;">
    <button id="next5">下一题</button>
</p>
<p id="pager6" style="display:none;">
    <button id="next6">下一题</button>
</p>

PS.我知道可以用setTimeout来延迟，也知道可以用clearTimeout来清除定时器。
烦请大神指教。

Answer 1

function g(id,context){
    context=context||document;
    return context.getElementById(id);
}
function gT(tagName,context){
    context=context||document;
    return context.getElementsByTagName(tagName);
}
function move(index,delay){
    index=index||1;
    delay=delay||5000;
    var dom=g("pager"+(index++)),ndom=g("pager"+index),timer,btn;
    timer=setTimeout(function(){
        moveUi(dom,ndom);
        move(index,delay)
    },delay);
    btn=gT("button",dom)[0];
    btn&&(btn.onclick=function(){
        clearTimeout(timer);
        timer=null;
        moveUi(dom,ndom);
        move(index,delay);
    })
}
function moveUi(dom,ndom){
    dom&&(dom.style.display="none");
    ndom&&(ndom.style.display="block");
}

move();

献丑

Answer 2

或者用css3的动画来控制，或许更好点~

Answer 3

我先占个坑，午饭回来写

Answer 4

    <p class="change">
        <p id="pager1">
            <button id="next1">下一题1</button>
        </p>
        <p id="pager2" style="display:none;">
            <button id="next2">下一题2</button>
        </p>
        <p id="pager3" style="display:none;">
            <button id="next3">下一题3</button>
        </p>
        <p id="pager4" style="display:none;">
            <button id="next4">下一题4</button>
        </p>
        <p id="pager5" style="display:none;">
            <button id="next5">下一题5</button>
        </p>
        <p id="pager6" style="display:none;">
            <button id="next6">下一题6</button>
        </p>
    </p>
        <script>
            $(function(){
                var i=1;
                var autob;
                function textAuto(i,autob){
                    clearTimeout(autob);                
                    autob=setTimeout(function(){
                        $('#pager'+i).css('display','block').siblings().css('display','none');
                        i++;
                        if(i>6){
                            i=1;
                        }
                        textAuto(i,autob);
                    },2000);
                }
                textAuto(i,autob);
                function clickbutton(i,autob){
                    for (var j=1;j<7;j++) {
                    (function(j){                       
                            $('#pager'+j).on('click',function(){
                               // alert(j);
                                clearTimeout(autob);
                                if(j==6)
                                j=0;
                                var m=j+1;
                                $('#pager'+m).css('display','block').siblings().css('display','none');

                            });
                        })(j);
                    }
                }

                clickbutton(i,autob);
            });
        </script>