Javascript 如果没有请点击此 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>

但是，我尝试的任何方式最终都会破坏我正在工作的部分。任何 js 向导都可以帮我理清思路吗？

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>