javascript - 具有同步导航的 slider

Question

这是我迄今为止创建的内容: screenshot here

基本上，您从左侧的红色 div 开始，右侧的红色圆圈处于事件状态。例如，当您单击蓝色圆圈时，左侧的 div 变为蓝色，然后蓝色圆圈变为事件状态，红色圆圈变为非事件状态。这是点击蓝色圆圈后的样子:screenshot here

当然，如果您单击绿色圆圈，左侧的 div 会变成绿色，如果您单击黑色圆圈，左侧的 div 会变成黑色。

代码如下:

$(document).ready(function(){
    $('#circle-2').click(function(){
        $(this).addClass('active-circle')
        $('#circle-1').removeClass('active-circle')
        $('#circle-3').removeClass('active-circle')
        $('#circle-4').removeClass('active-circle')
        $('.rect').removeClass('rect-1').removeClass('rect-3').removeClass('rect-4').addClass('rect-2')
    })

    $('#circle-1').click(function(){
        $(this).addClass('active-circle')
        $('#circle-2').removeClass('active-circle')
        $('#circle-3').removeClass('active-circle')
        $('#circle-4').removeClass('active-circle')
        $('.rect').removeClass('rect-2').removeClass('rect-3').removeClass('rect-4').addClass('rect-1')
    })

    $('#circle-3').click(function(){
        $(this).addClass('active-circle')
        $('#circle-1').removeClass('active-circle')
        $('#circle-2').removeClass('active-circle')
        $('#circle-4').removeClass('active-circle')
        $('.rect').removeClass('rect-1').removeClass('rect-2').removeClass('rect-4').addClass('rect-3')
    })

    $('#circle-4').click(function(){
        $(this).addClass('active-circle')
        $('#circle-1').removeClass('active-circle')
        $('#circle-2').removeClass('active-circle')
        $('#circle-3').removeClass('active-circle')
        $('.rect').removeClass('rect-1').removeClass('rect-2').removeClass('rect-3').addClass('rect-4')
    })
})

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.rect {
    height: 50vh;
    width: 100%;
}

.rect-1 {
    background: red;
}

.rect-2 {
    background: blue;
}

.rect-3 {
    background: green;
}

.rect-4 {
    background: black;
}

.circle {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    opacity: .25;
}

.circle-color-1 {
    background-color: red;
}

.circle-color-2 {
    background-color: blue;
}

.circle-color-3 {
    background-color: green;
}

.circle-color-4 {
    background-color: black;
}

.active-circle {
    opacity: 1;
}

    <div class="grid">
        <div class="rect rect-1">

        </div>
        <div class="circles-container">
            <div id="circle-1" class="circle circle-color-1 active-circle">Circle 1</div>
            <div id="circle-2" class="circle circle-color-2">Circle 2</div>
            <div id="circle-3" class="circle circle-color-3">Circle 3</div>
            <div id="circle-4" class="circle circle-color-4">Circle 4</div>
        </div>
    </div>
    <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous">
    </script>
    <script src="./index.js"></script>

现在这就是我正在挣扎的地方。我希望左边的 div 每 3 秒自动切换一次颜色，当然，右边的圆圈也应该匹配。因此，我们一开始左侧的 div 为红色，右侧的红色圆圈处于事件状态，3 秒后 div 变为蓝色，事件圆圈为蓝色圆圈。基本上我现在所拥有的只是自动发生，无需单击圆圈并保留单击功能。

Answer 1

除了实现元素的自动循环之外，您的首要任务是干燥您的代码。鉴于多个重复事件处理程序之间的所有更改都是您添加的类，您可以删除 id 属性并通过其公共(public) .circle 类来定位元素。然后，您可以绑定(bind)一个适用于所有元素的事件处理程序，并将该类应用于存储在每个元素上的 data 属性中的 .rect。

要创建循环效果，您可以使用 setInterval()，定位当前具有 .active-circle 的下一个元素。试试这个:

jQuery($ => {
  var $rect = $('.rect');
  var $circles = $('.circle').on('click', setActiveCircle);
  $circles.first().trigger('click');
  
  function setActiveCircle() {
    $circles.removeClass('active-circle');
    $(this).addClass('active-circle');
    $rect.removeClass('rect-1 rect-2 rect-3 rect-4').addClass($(this).data('rect'));
  }
  
  setInterval(function() {
    let $targetCircle = $circles.filter('.active-circle').next();
    if ($targetCircle.length === 0)
      $targetCircle = $circles.first();
      
    setActiveCircle.call($targetCircle);
  }, 3000);  
});

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.rect {
  height: 50vh;
  width: 100%;
}

.rect-1 { background: red; }
.rect-2 { background: blue; }
.rect-3 { background: green; }
.rect-4 { background: black; }

.circle {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: .25;
}

.circle-color-1 { background-color: red; }
.circle-color-2 { background-color: blue; }
.circle-color-3 { background-color: green; }
.circle-color-4 { background-color: black; }

.active-circle { opacity: 1; }

<div class="grid">
  <div class="rect"></div>
  <div class="circles-container">
    <div class="circle circle-color-1" data-rect="rect-1">Circle 1</div>
    <div class="circle circle-color-2" data-rect="rect-2">Circle 2</div>
    <div class="circle circle-color-3" data-rect="rect-3">Circle 3</div>
    <div class="circle circle-color-4" data-rect="rect-4">Circle 4</div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>