Question

我使用基于a href id值的jQuery函数将每4个div切换10秒。

计时器工作正常并且每10秒更改4个div但是当用户单击特定div时它不会导航到特定div并在那里停留一段时间（例如10秒）并从当前进行到下一个div div而不是它根据计时器值转到div。

任何人都可以帮我这个吗？

$(function() {
    $("a.menu").click(function() {
        $("div.featuredposts_content").hide();
        $($(this).attr('href')).show();
        return false;
    });
});

$(function() {
    var counter = 0,
        divs = $('#cat1, #cat2, #cat3,#cat4');

    function showDiv() {
        divs.hide() // hide all divs
        .filter(function(index) {
            return index == counter % 4;
        }) // figure out correct div to show
        .show('fast'); // and show it
        counter++;
    }; // function to loop through divs and show correct div
    showDiv(); // show first div    
    setInterval(function() {
        showDiv(); // show next div
    }, 15 * 1000); // do this every 10 seconds    
});

Answer 1

我从评论中发布的片段中假设了确切的标记。

首先，我认为你应该在每个完整周期后重新设置你的计数器，否则它会增长，成长，成长并最终可能导致异常，可能不是在前2-3天但最终。 counter变量不需要超出divs.length。

除了代码中唯一真正缺少的是在点击事件中设置计数器值：

$("a.menu").click(function() {
    $("div.featuredposts_content").hide();
    var $divToShow = $($(this).attr('href'));
    $divToShow.show();

    // save the index of the new div +1 to ensure it moves on to the div thereafter
    counter = divs.index($divToShow) + 1; 

    return false;
});

DEMO - 定时器从选定的div继续

（为了演示目的，我缩短了DEMO中的计时器，你应该将其重新设置为原始值）

我使用了以下假定的HTML：

<a href="#cat1" class="menu">cat1</a>
<a href="#cat2" class="menu">cat2</a>
<a href="#cat3" class="menu">cat3</a>
<a href="#cat4" class="menu">cat4</a>
<div id="cat1" class="featuredposts_content">Category1</div>
<div id="cat2" class="featuredposts_content">Category2</div>
<div id="cat3" class="featuredposts_content">Category3</div>
<div id="cat4" class="featuredposts_content">Category4</div>

这是完整的脚本：

$(function() {
    var counter = 0;
    var divs = $('#cat1, #cat2, #cat3, #cat4');

    function showDiv() {
        divs.hide() // hide all divs
        .filter(function(index) {
            return index == counter % divs.length;
        }) // figure out correct div to show
        .show('fast'); // and show it
        if(counter == divs.length){
            counter = 1;
        } else {
            counter++
        }
    }; // function to loop through divs and show correct div
    showDiv(); // show first div    
    setInterval(function() {
        showDiv(); // show next div
    }, 2000); // do this every 10 seconds    

    $("a.menu").click(function() {
        $("div.featuredposts_content").hide();
        var $divToShow = $($(this).attr('href'));
        $divToShow.show();

        counter = divs.index($divToShow) + 1;

        return false;
    });
});

jquery计时器不会显示被单击的div，而是根据计时器导航到div

1 个答案:

DEMO - 定时器从选定的div继续