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 Table

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

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

必须使用Prev / Next按钮进行同样的操作，这就是问题所在。

给定一个带有三个元素的HTML“ol”，我必须进行迭代，如果我在第二个li元素中，如果我单击Next，它将在第三个li元素上出现，如果我单击Back it将回到第一个

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

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

结果实际上是这样的。

点击“下一步”（反之亦然“prev”）

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

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

我想我需要一个循环才能做到这一点。你能帮助我吗？感谢。

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解决方案。随着下一个＆amp;以前。

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>

用旋转木马切换元素的类

2 个答案: