Question

我有一些jQuery滑块，每个滑块应具有其自己唯一的链接，但是无论它总是采用kast幻灯片的链接是什么？例如，幻灯片1会获得幻灯片2的链接，因为它应该有自己的链接。

如何更改下面的代码以在每张幻灯片上具有唯一的链接？

HTML

  <div class=slider-group>
    <div class="slider-btn">
      <button class="slider-prev"><</button>
      <button class="slider-next">></button>
    </div>
    <div class="slider">
      <div class="slide active">
        <h2>Slide 1</h2>
        <a href="test1.com">Test 1</a>
      </div>
      <div class="slide">
        <h2>Slide 2</h2>
         <a href="test2.com">Test 2</a>
      </div>
    </div>
  </div>
  <div class=slider-group>
    <div class="slider-btn">
      <button class="slider-prev"><</button>
      <button class="slider-next">></button>
    </div>
    <div class="slider">
      <div class="slide active">
        <h2>Slide 3</h2>
      </div>
      <div class="slide">
        <h2>Slide 4</h2>
      </div>
    </div>
  </div>

CSS

.slider-group {

}
.slider {
  width: 80%;
  height:500px;
  position: relative;
}

.slide {
  transition: opacity 500ms ease;
  position: absolute;
  opacity: 0;
}

.active {
  opacity: 1;
}

jQuery

    $(".slider-group").each(function(i, group) {
  var allSlides = $(".slide", group);
  var activeSlide = 0;

  setInterval(autoSlide, 4000);

  $(".slider-next", group).click(function() {
    if (activeSlide + 1 >= allSlides.length) {
      allSlides.eq(activeSlide).removeClass("active");
      activeSlide = 0;
      allSlides.eq(0).addClass("active");
    } else {
      allSlides.eq(activeSlide).removeClass("active");
      activeSlide++;
      allSlides.eq(activeSlide).addClass("active");
    }
  });
  $(".slider-prev", group).click(function() {
    if (activeSlide - 1 < 0) {
      allSlides.eq(0).removeClass("active");
      activeSlide = allSlides.length - 1;
      allSlides.eq(activeSlide).addClass("active");
    } else {
      allSlides.eq(activeSlide).removeClass("active");
      activeSlide--;
      allSlides.eq(activeSlide).addClass("active");
    }
  });

  function autoSlide() {
    if (activeSlide + 1 >= allSlides.length) {
      allSlides.eq(activeSlide).removeClass("active");
      activeSlide = 0;
      allSlides.eq(0).addClass("active");
    } else {
      allSlides.eq(activeSlide).removeClass("active");
      activeSlide++;
      allSlides.eq(activeSlide).addClass("active");
    }
  }
});

Answer 1

通过在CSS中添加z-index自己解决了该问题。

jQuery滑块-每个幻灯片的唯一链接

1 个答案: