Сбросить функцию Auto Nav при наведении курсора в 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>