jQuery循环通过按钮与文本同时

Question

我一直在研究一个功能，该功能可循环显示文本列表，但无法同时循环通过每个按钮，我试图在显示相应文本时更改每个按钮的背景颜色。

var title_scroll = (function() {
  var titleSlide = 0;

  var titleScroll = function(i) {
    var margin = '-' + (parseInt(i) * 1) + 'em';
    if (titleSlide < $('#titleScroll ul li').length - 1) {
      titleSlide++;
    } else {
      titleSlide = 0;
    }
    $('#titleScroll ul').css('margin-top', margin);
  }
  
  setInterval(function() {
    titleScroll(titleSlide)
  }, 1800);
})();

.inline {
  display: inline-block;
  vertical-align: middle;
}

#titleScroll ul {
  padding-left: 6px;
}

.hero section {
  width: 100%;
  height: 100vh;
  flex: 1;
  display: flex;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero section .title {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  max-width: 60%;
  justify-content: center;
  text-align: right;
  z-index: 10;
  color: #fff;
  margin: 0 auto;
  position: relative;
}

.hero .title h2 {
  margin: 0;
}

#titleScroll {
  height: 1em;
  overflow: hidden;
}

#titleScroll ul {
  transition: all 0.35s cubic-bezier(0.75, 0.1, 0.25, 0.9)
}

#titleScroll li {
  list-style: none;
  font-size: 1em;
  line-height: 1em;
}

.service-buttons li {
  display: inline-block;
  width: 25%;
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="inline">Hi hi </h2>
<h2 id="titleScroll" class="inline">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</h2>
<h2>hi there <strong>I love:</strong></h2>
<ul id="sbuttons" class="service-buttons">
  <li id="button-1" class="sbtn">1</li>
  <li id="button-2" class="sbtn">2</li>
  <li id="button-3" class="sbtn">3</li>
  <li id="button-4" class="sbtn">4</li>
</ul>

有人可以帮忙吗？

我一直在研究一个可以循环显示文本列表但无法同时循环通过每个按钮的函数，我试图在显示相应文本时更改每个按钮的背景颜色。

Answer 1

要突出显示与活动幻灯片相关的按钮，您需要知道其索引。您可以通过使用模运算符（%）来获得迭代计数器和幻灯片总数之间除法的余数。

然后，您可以使用eq()获取li并将其应用于该类。试试这个：

var title_scroll = (function() {
  var $scrollUl = $('#titleScroll ul');
  var $buttonLi = $('#sbuttons li');
  var slideCount = $scrollUl.find('li').length;
  var titleSlide = 0;

  var titleScroll = function() {
    var activeIndex = titleSlide % slideCount;
    $scrollUl.css('margin-top', '-' + activeIndex + 'em');
    $buttonLi.removeClass('active').eq(activeIndex).addClass('active');
    titleSlide++;
    setTimeout(titleScroll, 1800);
  }

  titleScroll();
})();

.inline {
  display: inline-block;
  vertical-align: middle;
}

#titleScroll ul {
  padding-left: 6px;
}

.hero section {
  width: 100%;
  height: 100vh;
  flex: 1;
  display: flex;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero section .title {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  max-width: 60%;
  justify-content: center;
  text-align: right;
  z-index: 10;
  color: #fff;
  margin: 0 auto;
  position: relative;
}

.hero .title h2 {
  margin: 0;
  background: olive;
}

#titleScroll {
  height: 1em;
  overflow: hidden;
  background: olive;
}

#titleScroll ul {
  transition: all 0.35s cubic-bezier(0.75, 0.1, 0.25, 0.9);
  margin: 0;
}

#titleScroll li {
  list-style: none;
  font-size: 1em;
  line-height: 1em;
}

.service-buttons li {
  display: block;
  width: 25%;
  background-color: grey;
  float: left;
}

.service-buttons li.active {
  background-color: olive;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title parallax" data-type="content" data-offset="90">
  <div data-aos="fade-up" data-aos-duration="2250" data-aos-delay="300">
    <h2 class="inline">We Deliver </h2>
    <h2 id="titleScroll" class="inline">
      <ul>
        <li>Commercial Kitchens</li>
        <li>Air Conditioning & Ventilation</li>
        <li>HVAC</li>
        <li>Refrigeration & Cooling</li>
      </ul>
    </h2>
    <h2>Services That <strong>You Can Rely On</strong></h2>
    <ul id="sbuttons" class="service-buttons">
      <li id="button-1" class="sbtn" data-index="1">1</li>
      <li id="button-2" class="sbtn" data-index="2">2</li>
      <li id="button-3" class="sbtn">3</li>
      <li id="button-4" class="sbtn">4</li>
    </ul>
  </div>
</div>