使用轮播在元素上切换类

Question

我对“自制”轮播有疑问，我不能使用 Bootstrap 提供的标准。

这大概是我的代码结构：

图片

 <img src="1.img"/>
 <img src="2.img"/>
 <img src="3.img"/>

上一个/下一个按钮

 <div class="left"></div> left button
 <div class="right"></div> right button

这些按钮让我在“ol”的元素中来回切换。

老表

 <ol>
      <li>Circle 1</li>
      <li class="active">Circle 2</li>
      <li>Circle 3</li>
 </ol> 

如果我点击一个按钮，将加载相应的数据，并且我点击的按钮将有一个“活动”类。

Prev / Next 按钮也必须这样做，这就是问题所在。

给定一个包含三个元素的 HTML“ol”，我必须进行迭代，这样，如果我在第二个 li 元素中，如果我点击 Next，它将继续在第三个 li 元素上，如果我点击 Back 它会回到第一个

我假设从第二个元素和活动类开始。

我可以使用 jQuery 的 prev() 和 next() 函数，但我必须创建一个 for 循环，因为当我在最后一个 li 元素中时，如果我点击“next”按钮，第一个 li 元素有被选中，反之亦然，如果我在第一个，最后一个必须被“选中”。

结果实际上是这样的。

点击“下一个”（反之亦然“上一个”）

 $("li.active").next().addClass("active");
 $("li.active").prev().removeClass("active");

两个问题： 1）当我在第一个元素中并单击转到第二个元素时，“活动”类被赋予第三个 li 元素而不是第二个元素，但如果我从最后一个元素开始，这可以正常工作 2）如果我在第一个元素中，如果我返回，它不会选择最后一个元素，反之亦然

我认为我需要一个 for 循环来执行此操作。你能帮助我吗？谢谢。

Answer 1

这是下一个按钮的代码：

$(".next").on("click", function(){
  moveToNext();
});//.next click

function moveToNext()
{
  var curIndex = $("ol li.active").index();
  var totalSlides = $("ol li").length;
  var nextIndex = curIndex + 1;

  if( nextIndex >= totalSlides )
  {
    nextIndex = 0;
  }//if

  $("ol li.active").removeClass("active");
  $("ol li").eq( nextIndex ).addClass("active").trigger("click");

}//moveToNext();

您可以对上一个按钮进行类似的实现。

Answer 2

纯 JavaScript 解决方案。与下一个和上一个。

var next = document.querySelector('#next');
var previous = document.querySelector('#previous');
var images = document.querySelectorAll('.slider img');
var ols = document.querySelectorAll('.slider ol li');
var count = 0;

if (next) {
  next.addEventListener('click', nextImage, false);
  previous.addEventListener('click', prevImage, false);
}

for (var i = 0; i < ols.length; i++) {
  var element = ols[i];
  element.addEventListener('click', function() {

    for (var i = 0; i < images.length; i++) {
      if (images[i].classList.contains('active')) {
        images[i].classList.remove('active');
      }
      if (ols[i].classList.contains('active')) {
        ols[i].classList.remove('active');
      }
    }

    images[this.dataset.count].classList.add('active');
    ols[this.dataset.count].classList.add('active');
    count = this.dataset.count;
  });
}

function nextImage() {
  for (var i = 0; i < images.length; i++) {
    if (images[i].classList.contains('active')) {
      images[i].classList.remove('active');
    }
    if (ols[i].classList.contains('active')) {
      ols[i].classList.remove('active');
    }
  }
  if (count === images.length - 1) {
    count = 0;
    images[count].classList.add('active');
    ols[count].classList.add('active');
  } else {
    count++;
    images[count].classList.add('active');
    ols[count].classList.add('active');
  }

}

function prevImage() {
  for (var i = 0; i < images.length; i++) {
    if (images[i].classList.contains('active')) {
      images[i].classList.remove('active');
    }
    if (ols[i].classList.contains('active')) {
      ols[i].classList.remove('active');
    }
  }
  if (count === 0) {
    count = images.length - 1;
    images[count].classList.add('active');
    ols[count].classList.add('active');
  } else {
    count--;
    images[count].classList.add('active');
    ols[count].classList.add('active');
  }

}

img {
  width: 120px;
  height: 120px;
}
img.active {
  background: #DDD;
}
li.active {
  color: #000;
  background: #ddd;
}
ol li {
  background: #fff;
  border: 1px solid #DDD;
  cursor: pointer;
  padding: 3px;
  display: inline-block;
}

<div class="slider">

  <img class='active' src="" />
  <img src="" />
  <img src="" />

  <ol>
    <li data-count='0' class="active">Circle 1</li>
    <li data-count='1'>Circle 2</li>
    <li data-count='2'>Circle 3</li>
  </ol>
</div>

<button id="previous">Previous</button>

<button id="next">Next</button>