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

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