Question

在互联网的帮助下，我提出了类似的结论：http://codepen.io/birjolaxew/pen/yJYLyz

这篇文章的作者刚修复了我的语法错误：）;

但是我遇到了另一个问题，我怎么能在这里实现setInterval呢？所以每隔一秒左右检查一次收音机并继续下一张图像。我已经搜索了一些关于它的视频，但它并没有真正帮助我。也许看到我特定问题的代码可以帮助我理解！

Code:

    <!-- Images -->
<div class="fb featuredslider_container">
  <div id="images">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/a4/11/3e/a4113ec2da852f2eaa65af72e96decb6.jpg" />
    <img src="http://cdn.arstechnica.net/wp-content/uploads/2015/09/GooglePlus-logos-02-980x980.png" />
    <img src="http://img05.deviantart.net/6b35/i/2013/015/7/9/the_white_dog_sophie_2_by_thecakemassacre-d5rko7g.jpg" />
  </div>
  <!-- Radio Sutff -->
  <div class="featuredradiowrap">
    <input checked class="featuredradio" id="featureditemslider1" name="itemslider" type="radio">
    <label for="featureditemslider1"></label>
    <input class="featuredradio" id="featureditemslider2" name="itemslider" type="radio">
    <label for="featureditemslider2"></label>
    <input class="featuredradio" id="featureditemslider3" name="itemslider" type="radio">
    <label for="featureditemslider3"></label>
  </div>
</div>

Css:

    .featuredslider_container{
  position: relative;
  width: 500px;
  height: 250px;
  margin: 0 auto 32px;
  overflow: initial;  /* Change to overflow:hidden if you want to see the final product */
  box-shadow: 0 0 0 2px #BFB198;
}
#images {
  font-size: 0;
  /*Remove white space */
  width: 1500px;
  height: 100%;
  animation: move-images 8s infinite;
  position: absolute;
  left: 0;
  top: 0;
}

#images img {
  width: 500px;
  height: 100%;
}


/* Radio Sutff */

input[type="radio"] {
  display: none;
}

.featuredradiowrap {
  position: absolute;
  bottom: 0.8rem;
  left: 50%;
  transform: translateX(-50%);
}

.featuredradio + label:before {
  content: "";
  display: inline-block;
  margin-right: 2px;
  border-radius: 30px;
  background: #00a0ff;
  height: 17px;
  width: 17px;
}

input[type="radio"]:checked + label:before {
  background: orange;
}

Javascript

    var featuredRadio = document.getElementsByClassName("featuredradiowrap")[0];
var images = document.getElementById("images");

function leftAnimation() {
  if (document.getElementById("featureditemslider1").checked == true) {
    images.style.transition = "left 2s linear 0s";
    images.style.left = "0";
  } if (document.getElementById("featureditemslider2").checked == true) {
    images.style.transition = "left 2s linear 0s";
    images.style.left = "-500px";
  }
  if (document.getElementById("featureditemslider3").checked == true) {
    images.style.transition = "left 2s linear 0s";
    images.style.left = "-1000px";
  }
}
featuredRadio.addEventListener("click", leftAnimation);

Answer 1

试试这个。您实际上是以包装器为目标，而不是输入。

var featuredRadio = document.getElementsByClassName("featuredradio");
var images = document.getElementById("images");

function leftAnimation() {
  if (featuredRadio[0].checked == true) {
    images.style.transition = "left 2s linear 0s";
    images.style.left = "0";
  } else if (featuredRadio[1].checked == true) {
    images.style.transition = "left 2s linear 0s";
    images.style.left = "-500px";
  }
  else if (featuredRadio[2].checked == true) {
    images.style.transition = "left 2s linear 0s";
    images.style.left = "-1000px";
  }
}
featuredRadio.addEventListener("click", leftAnimation);

你如何在这里实现滑块的计时器？

1 个答案: