Question

我是JQuery的新手，我对Dot Navigation有疑问......

我有一些Hero内容，我已经放在一起（使用来自这里的帖子和JQuery网站）。基本上我有3个div容器，这些容器被隐藏并显示在一个循环中。我还有三个其他div容器，其中有点我想用作导航。在循环过程中，点会改变颜色以表示页面当前所处的“幻灯片”。

我现在要做的是为每个点添加一个点击事件，以便循环跳转并显示相应的内容。

我的Java脚本在下面。

        $('.heroContBG').each(function() {
        $(this).hide(0);
    });
    $('.heroContBG').first().show(0);
    $('.heroDots').last().removeClass('heroNavOff').addClass('heroNavOn');
    var delay = 6000; //Set delay time
    var divIdx = 0; //Set divIdx value
    var arrDiv = $('.heroContBG').toArray(); //Assign all heroContBG divs to array
    var arrDot = $('.heroDots').toArray(); //Assign all heroDots divs to array
    arrDot = arrDot.reverse(); //Reserve array index for Dot Navigation  

    function heroBG(){
        var $out = $(arrDiv[divIdx]); //Set $out variable to current array index (set by divIdx)
        var $dotOut = $(arrDot[divIdx]); //Set dotOut variable to current array index (set by divIdx)
        divIdx = (divIdx + 1) % arrDiv.length; //Convert array index 0-2 into 1-3
        var $in = $(arrDiv[divIdx]); //Set $in to $arrDix[divIdx]
        var $dotIn = $(arrDot[divIdx]); //Set $dotIn to $arrDot[divIdx]
        $out.fadeOut(600).hide(); //Hide element
        $dotOut.removeClass('heroNavOn').addClass('heroNavOff'); //Swap classes on .heroDots
        $in.fadeIn(1600).show(); //Show next element
        $dotIn.removeClass('heroNavOff').addClass('heroNavOn'); //Swap classes on .heroDots
    }
    setInterval(heroBG, delay); //Tell browser to loop through elements.

我认为我需要做的是让click事件设置divIdx值以匹配相应div容器的值但是我还没有运气。

我将继续玩这个，如果我成功了，我会在这里发布。如果有其他人知道如何做到这一点会很棒。

我还应该提到我并不想使用第三方插件，因为我非常希望提高我的JQuery技能。

干杯，

西蒙

Answer 1

只需使用$('.heroDots').index(myClickedHeroDot)即可获得有针对性的兄弟姐妹的位置。然后将返回的索引值分配给divIdx。

希望这会有所帮助：）

点导航JQuery幻灯片放映

1 个答案: