如果不单击此JS，则此

Question

我试图在我的应用程序的主页上创建一个幻灯片类型的效果，但我对JS相当陌生，并且遇到了一些复杂的问题。我有一个带有延迟和setTimeouts的工作幻灯片，如下所示：

<script>
  setTimeout(function() {
    $("#hero-image-index").fadeOut().empty();
  }, 6000);
  setTimeout(function() {
    $("#slide-1").fadeOut(500);
  }, 6000);
  $('#slide-2').delay(6000).fadeIn(3000);
  setTimeout(function() {
    $("#slide-2").fadeOut(500);
  }, 12000);
  $('#slide-3').delay(12000).fadeIn(3000);
  setTimeout(function() {
    $("#slide-3").fadeOut(500);
  }, 18000);
  $('#slide-4').delay(18000).fadeIn(3000);
  setTimeout(function() {
    $("#slide-4").fadeOut(500);
  }, 25000);
  $('#slide-5').delay(25000).fadeIn(3000);
  setTimeout(function() {
    $("#slide-5").fadeOut(500);
  }, 32000);
  $('#slide-6').delay(32000).fadeIn(3000);
  setTimeout(function() {
    $("#slide-6").fadeOut(500);
  }, 39000);
  $('#slide-7').delay(39000).fadeIn(3000);
  $('#hero-image-index-2').delay(39000).fadeIn(3000);
</script>

但是，现在客户端需要一个导航，这样用户就可以随意地从一个幻灯片滑到另一个幻灯片，我已经在每个“幻灯片”上使用ionicons设置了这个导航。这里有一个“幻灯片”示例：

  <div class="slide text-center" id="slide-1">
    <h1 style="margin: 75px 0 40px 0; font-size: 52px; color: white; font-weight: bolder">Genetic Golf</h1>
    <h2 style="color: white">We&nbsp;don't&nbsp;guess, we test to find what works best&nbsp;for&nbsp;you!</h2>
      <div class="index-icon-box" style="color: white">
        <i class="icon go-to-7 ion-chevron-left"></i>
        <i class="icon go-to-1 ion-android-radio-button-on"></i>
        <i class="icon go-to-2 ion-android-radio-button-off"></i>
        <i class="icon go-to-3 ion-android-radio-button-off"></i>
        <i class="icon go-to-4 ion-android-radio-button-off"></i>
        <i class="icon go-to-5 ion-android-radio-button-off"></i>
        <i class="icon go-to-6 ion-android-radio-button-off"></i>
        <i class="icon go-to-7 ion-android-radio-button-off"></i>
        <i class="icon go-to-2 ion-chevron-right"></i>
      </div> <!-- index icon box -->
  </div> <!-- slide 1 -->

我希望用JS来做一些事情，比如“如果用户不点击.index-icon-box内部，然后运行js，就像我已经拥有的那样，但是如果他们点击了一个.icon，那么就这样做：

<script>
  $(document).ready(function() {
    $(".go-to-1").click(function(){
      $("#slide-1").show();
      $("#slide-2").hide();
      $("#slide-3").hide();
      $("#slide-4").hide();
      $("#slide-5").hide();
      $("#slide-6").hide();
      $("#slide-7").hide();
    });
    $(".go-to-2").click(function(){
      $("#slide-1").hide();
      $("#slide-2").show();
      $("#slide-3").hide();
      $("#slide-4").hide();
      $("#slide-5").hide();
      $("#slide-6").hide();
      $("#slide-7").hide();
    });
  };
</script>

然而，不管我怎么尝试，结果都会破坏我工作的部分。有什么奇才能把我弄直吗？

Answer 1

如果您打算在不使用库的情况下自己执行此操作，则可能需要尝试以下操作。

首先，考虑将您的幻灯片放在一个容器中，并将图标叠加起来以选择幻灯片上的幻灯片。然后使用幻灯片和容器的索引跟踪图像。这提供了一个易于编辑的幻灯片显示设置。

下面是一个简单的例子，它应该在您所要寻找的附近。

​

jQuery(document).ready(function($) {
  // Hides all images except for one, the one is given by an 
  // index. Also updates the controller.
  function showSlide(index) {
    $('.slides .slide').each(function(i) {
      if (i == index) {
        $(this).fadeIn(500);
      } else {
        $(this).fadeOut(500);
      }
    });
    
    var spans = $('.controller span').removeClass('active');
    spans.eq(index).addClass('active');
  }

  // Show only the first element and set an interval to 
  // continue to cycle through elements.
  var index = 0;
  showSlide(index);

  var intervalFunc = function() {
    index = index >= $('.slides .slide').length ? 0 : index + 1;
    showSlide(index);
  };
  var interval = setInterval(intervalFunc, 6000);

  // Handle clicks which will reset the interval to each time.
  $('.controller span').click(function() {
    // Set the current picture.
    index = $(this).index();
    showSlide(index);
    
    // Reset the interval
    clearInterval(interval);
    interval = setInterval(intervalFunc, 6000);
  });
});

.slideshow-contianer {
  position: relative;
  /* For Deomnstation purposes*/
  width: 400px;
  height: 200px;
  margin: 2em;
}
.slides img {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
}
.controller {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  -webkit-display: flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}
.controller span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  border: 2px solid #ccc;
  cursor: pointer;
  margin: 10px;
  /* Transition is a personal asthetic. */
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.controller span.active,
.controller span:hover {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="slideshow-contianer">
  <div class="slides">
    <img class="slide" src="https://unsplash.it/400/200?random" />
    <img class="slide" src="https://unsplash.it/400/200?random" />
    <img class="slide" src="https://unsplash.it/400/200?random" />
    <img class="slide" src="https://unsplash.it/400/200?random" />
    <img class="slide" src="https://unsplash.it/400/200?random" />
  </div>
  <div class="controller">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

​