你如何在这里为滑块实现一个计时器？

With the help of internet, I came up with something like this: http://codepen.io/birjolaxew/pen/yJYLyz

在互联网的帮助下,我想出了类似的东西:http://codepen.io/birjolaxew/pen/yJYLyz

The author of this posts just fixed my syntax errors :);

这篇文章的作者只修复了我的语法错误:);

But I came across another problem, how can I implement the setInterval here? so each second or so the radio is checked and the next image proceeds. I've googled a few videos about it but it didn't really aid me much. Perhaps seeing the code to my specific problem would help me in my understanding!

但我遇到了另一个问题,我如何在这里实现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_thecake*-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);

1 个解决方案

#1

Try this one. You are actually targeting the wrapper, not the inputs.

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

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