我对 JQuery 很陌生,我有一个关于点导航的问题......
我有一些我整理的英雄内容(使用来自这里的帖子和 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.
我认为我需要做的是让一个点击事件设置 divIdx 值以匹配相应 div 容器的值,但到目前为止我还没有运气。
我会继续玩这个,如果我成功了,我会在这里发布。如果其他人知道如何做到这一点,那就太好了。
我还应该提到我真的不想使用 3rd 方插件,因为我非常热衷于提高我的 JQuery 技能。
干杯,
西蒙