javascript - 在 jQuery 中悬停时重置自动导航功能

Question

我的 div 会自动循环到下一个 div 并每隔几秒显示其内容。当相应的链接悬停时，也会显示相同的内容。该功能工作正常，但是可以重置自动导航功能，以便当鼠标离开链接时自动导航从第一个链接开始吗？下面是代码:

$(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() {
    hovered = false;
  });

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

  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();
    }

  }
});

.left-fill {
  background: #0000006b;
  height: 100vh;
}

.right-fill {
  background: pink;
  height: 100vh;
}

.vc_col-sm-6 {
  width: 50%;
  float: left;
}

.pivot-nav {
  list-style: none;
  font-family: 'Montserrat';
  text-align: left;
}

.pivot-nav li a {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  color: #fff;
  text-decoration: none;
  line-height: 40px;
}

.pivot-nav li a.default-underline::after,
.pivot-nav li a:hover::after {
  width: 100%;
}

.pivot-nav:hover a.default-underline:not(:hover)::after {
  width: 0;
}

.pivot-nav li a::after {
  bottom: 0;
  content: "";
  display: block;
  height: 4px;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s;
  width: 0;
}

.home-o-c,
.home-c-f,
.home-i-c,
.home-c-u {
  display: none;
}

.our-company {
  clear: both;
  display: block;
  height: 50vh;
}

.cf2 {
  clear: both;
  display: block;
  height: 50vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left-fill text-left wpb_column vc_column_container vc_col-sm-6">

  <div class="wpb_wrapper">
    <p class="home-i-t">TEXT One</p>
    <p class="home-o-c">TEXT One</p>
    <p class="home-c-f">TExt for C f.</p>
    <p class="home-i-c">Some more text fo i c.</p>
    <p class="home-c-u">Get in touch </p>

  </div>
</div>



<div class="home-fill right-fill text-right wpb_column vc_column_container vc_col-sm-6">

  <div class="wpb_wrapper">
    <ul class="pivot-nav">
      <li class="pivot-nav-item"><a data-hover="o-c" class="home-link" href="#" data-toggle="my-scrollspy-2">O C</a></li>
      <li class="pivot-nav-item"><a data-hover="c-f" class="home-link" href="#" data-toggle="my-scrollspy-2">C F</a></li>
      <li class="pivot-nav-item"><a data-hover="i-c" class="home-link" href="#" data-toggle="my-scrollspy-2">I C</a></li>
      <li class="pivot-nav-item" data-toggle="my-scrollspy-2"><a data-hover="c-u" class="home-link" href="#">C U</a></li>
    </ul>

  </div>
</div>

Answer 1

您可以按如下方式使用 mouseout 事件:

$('.wpb_wrapper').on('mouseout touchend touchcancel', function() {
  reset();
  start();
})

function start() {
  setTimeout(() => {
    autoNavInterval = setInterval(autoNav, 3000);
  }, 000);
}

function reset() {
  clearInterval(autoNavInterval);
  currentLink = 0;
  homeLinks.forEach(function(element) {
    $('[data-hover=' + element + ']').removeClass('default-underline');
    $('.home-' + element).hide();
  });
  $('.home-' + homeLinks[0]).show();
  hovered = false;
}

$(function() {
  var homeLinks = ['i-t', 'o-c', 'c-f', 'i-c', 'c-u'];
  var currentLink = 0;
  var hovered = false;
  var autoNavInterval;

  $(".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() {
    hovered = false;
  });

  function start() {
    setTimeout(() => {
      autoNavInterval = setInterval(autoNav, 3000);
    }, 000);
  }
  
  function reset() {
    clearInterval(autoNavInterval);
    currentLink = 0;
    homeLinks.forEach(function(element) {
      $('[data-hover=' + element + ']').removeClass('default-underline');
      $('.home-' + element).hide();
    });
    $('.home-' + homeLinks[0]).show();
    hovered = false;
  }

  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();
    }
  }
  
  start();
  
  $('.wpb_wrapper').on('mouseout touchend touchcancel', function() {
    reset();
    start();
  });
});

.left-fill {
  background: #0000006b;
  height: 100vh;
}

.right-fill {
  background: pink;
  height: 100vh;
}

.vc_col-sm-6 {
  width: 50%;
  float: left;
}

.pivot-nav {
  list-style: none;
  font-family: 'Montserrat';
  text-align: left;
}

.pivot-nav li a {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  color: #fff;
  text-decoration: none;
  line-height: 40px;
}

.pivot-nav li a.default-underline::after,
.pivot-nav li a:hover::after {
  width: 100%;
}

.pivot-nav:hover a.default-underline:not(:hover)::after {
  width: 0;
}

.pivot-nav li a::after {
  bottom: 0;
  content: "";
  display: block;
  height: 4px;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s;
  width: 0;
}

.home-o-c,
.home-c-f,
.home-i-c,
.home-c-u {
  display: none;
}

.our-company {
  clear: both;
  display: block;
  height: 50vh;
}

.cf2 {
  clear: both;
  display: block;
  height: 50vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left-fill text-left wpb_column vc_column_container vc_col-sm-6">
  <div class="wpb_wrapper">
    <p class="home-i-t">TEXT One</p>
    <p class="home-o-c">TEXT One</p>
    <p class="home-c-f">TExt for C f.</p>
    <p class="home-i-c">Some more text fo i c.</p>
    <p class="home-c-u">Get in touch </p>
  </div>
</div>
<div class="home-fill right-fill text-right wpb_column vc_column_container vc_col-sm-6">
  <div class="wpb_wrapper">
    <ul class="pivot-nav">
      <li class="pivot-nav-item"><a data-hover="o-c" class="home-link" href="#" data-toggle="my-scrollspy-2">O C</a></li>
      <li class="pivot-nav-item"><a data-hover="c-f" class="home-link" href="#" data-toggle="my-scrollspy-2">C F</a></li>
      <li class="pivot-nav-item"><a data-hover="i-c" class="home-link" href="#" data-toggle="my-scrollspy-2">I C</a></li>
      <li class="pivot-nav-item" data-toggle="my-scrollspy-2"><a data-hover="c-u" class="home-link" href="#">C U</a></li>
    </ul>
  </div>
</div>