Javascript 在jQuery中设置时间后自动显示和Div

我有一个div，它会自动循环到下一个div，每隔几秒钟就会显示它的内容。该功能工作正常，但是，当最后一个div隐藏时，第一个div显示为div对应链接中的下划线时，似乎有一个间隙，该div有一个轻微的延迟-它应该立即更改。我不明白为什么会这样。另外，我正在尝试在页面加载

5秒后执行该函数。延迟（5000）

似乎不起作用。代码如下：

var homeLinks=['i-t'，'o-c'，'c-f'，'i-c'，'c-u']；
var-currentLink=0；
var悬停=假；
$（“.home link”）.hover（函数（）{
悬停=正确；
$（'.home-'+homeLinks[currentLink]）.hide（）；
$（'[data hover='+homeLinks[currentLink]+']'）。toggleClass（'default-underline'）；
currentLink=homeLinks.indexOf（$（this.attr（'data-hover'））；
$（'[data hover='+homeLinks[currentLink]+']'）。toggleClass（'default-underline'）；
$（'.home-'+homeLinks[currentLink]）.show（）；
}，函数（）{
悬停=错误；
});
var autoNavInterval=setInterval（自动导航，3000）；
函数autoNav（）{
如果（悬停===false）{
$（'.home-'+homeLinks[currentLink]）.hide（）；
$（'[data hover='+homeLinks[currentLink]+']'）。toggleClass（'default-underline'）；
currentLink++；
if（currentLink>=homeLinks.length）{
currentLink=0；
}
$（'[data hover='+homeLinks[currentLink]+']'）。toggleClass（'default-underline'）；
$（'.home-'+homeLinks[currentLink]）.show（）；
}
}

。左填充{
背景：#0000006b；
高度：100vh；
}
.正确填充{
背景：粉红色；
高度：100vh；
}
.vc_col-sm-6{
宽度：50%；
浮动：左；
}
.枢轴导航{
列表样式：无；
字体系列：“蒙特塞拉特”；
文本对齐：左对齐；
}
.轴心导航李a{
字体大小：1.6rem；
字号：700；
文本转换：大写；
显示：内联块；
位置：相对位置；
颜色：#fff；
文字装饰：无；
线高：40px；
}
.pivot导航li a.default-underline:：之后，
.pivot导航李a:悬停：：之后{
宽度：100%；
}
.pivot导航：悬停a.default-underline:非（：悬停）：：之后{
宽度：0；
}
.pivot导航李a：：之后{
底部：0；
内容：“；
显示：块；
高度：4px；
位置：绝对位置；
背景：#fff；
过渡：宽度0.3s至0.0s；
宽度：0；
}
.home-o-c，
.home-c-f，
.home-i-c，
.home-c-u{
显示：无；
}
.我们公司{
明确：两者皆有；
显示：块；
高度：50vh；
}
.cf2{
明确：两者皆有；
显示：块；
高度：50vh；
}

文本一

文本一

c-f的文本

更多有关i-c的文本
联系

要在页面首次加载后5秒启动函数，您需要确保脚本在文档准备就绪后开始工作。使用基本jQuery函数

$（函数（）{/*加载文档后执行的代码*/}）。
而不是使用简单的javaScript函数setTimeout

下划线在
CU
和
O C
之间切换的时间更长，因为在遍历数组
homeLinks
中的每个元素后，您将currentLink值设置为0，并且0元素将是一个不存在的带有数据hover=“i-t”的a。您可以从数组中删除第一个字符串，或在列表中创建一个元素，或在使用currentLink达到homeLinks值后将currentLink值设置为1

我修复了您的脚本代码，使其完全符合您的描述，只需进行尽可能少的更改：

$(function () {

  var homeLinks = ['i-t', 'o-c', 'c-f', 'i-c', 'c-u'];
  var currentLink = 0;
  var hovered = false;

  $(".home-link").hover(function () {
    hovered = true;
    $('.home-' + homeLinks[currentLink]).hide();
    $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
    currentLink = homeLinks.indexOf($(this).attr('data-hover'));
    $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
    $('.home-' + homeLinks[currentLink]).show();
  }, function (event) {
    hovered = false;
    currentLink = 0;
    $('.wpb_wrapper p').hide();
    $(event.target).toggleClass('default-underline');
  });

  setTimeout(() => {
    var autoNavInterval = setInterval(autoNav, 1000);
  }, 1000);


  function autoNav() {

    if (hovered === false) {
      $('.home-' + homeLinks[currentLink]).hide();
      $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
      currentLink++;
      if (currentLink >= homeLinks.length) {
        currentLink = 1;
      }
      $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
      $('.home-' + homeLinks[currentLink]).show();
    }
    else {
    }
  }

});

要在页面首先加载5秒后启动函数，您需要确保脚本在文档准备就绪后开始工作。使用基本jQuery函数
$（函数（）{/*加载文档后执行的代码*/}）。
而不是使用简单的javaScript函数setTimeout

下划线在
CU
和
O C
之间切换的时间更长，因为在遍历数组
homeLinks
中的每个元素后，您将currentLink值设置为0，并且0元素将是一个不存在的带有数据hover=“i-t”的a。您可以从数组中删除第一个字符串，或在列表中创建一个元素，或在使用currentLink达到homeLinks值后将currentLink值设置为1

我修复了您的脚本代码，使其完全符合您的描述，只需进行尽可能少的更改：

$(function () {

  var homeLinks = ['i-t', 'o-c', 'c-f', 'i-c', 'c-u'];
  var currentLink = 0;
  var hovered = false;

  $(".home-link").hover(function () {
    hovered = true;
    $('.home-' + homeLinks[currentLink]).hide();
    $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
    currentLink = homeLinks.indexOf($(this).attr('data-hover'));
    $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
    $('.home-' + homeLinks[currentLink]).show();
  }, function (event) {
    hovered = false;
    currentLink = 0;
    $('.wpb_wrapper p').hide();
    $(event.target).toggleClass('default-underline');
  });

  setTimeout(() => {
    var autoNavInterval = setInterval(autoNav, 1000);
  }, 1000);


  function autoNav() {

    if (hovered === false) {
      $('.home-' + homeLinks[currentLink]).hide();
      $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
      currentLink++;
      if (currentLink >= homeLinks.length) {
        currentLink = 1;
      }
      $('[data-hover=' + homeLinks[currentLink] + ']').toggleClass('default-underline');
      $('.home-' + homeLinks[currentLink]).show();
    }
    else {
    }
  }

});

@非常感谢。这个很好用。是否可以重置autoNav功能，使其链接悬停，然后悬停。autoNav从第一个链接开始？我编辑了代码片段以提供此功能。我更改了handlerOut功能以重置导航状态。@非常感谢。这个很好用。是否可以重置autoNav功能，使其链接悬停，然后悬停。autoNav从第一个链接开始？我编辑了代码片段以提供此功能。我更改了handlerOut功能以重置导航状态。