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-wizards可以让我理顺吗？

Answer 1

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

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

下面显示了一个简单的示例，它应该在您正在寻找的附近。

＆＃13;

actual insertion

＆＃13;

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);
  });
});

＆＃13;

.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;
}

＆＃13;

Javascript如果没有点击此JS，其他

1 个答案: