在互联网的帮助下,我想到了以下内容:http://codepen.io/birjolaxew/pen/yJYLyz
本文的作者只是修复了我的语法错误:);
但是我遇到了另一个问题,如何在这里实现setInterval?因此大约每秒钟检查一次收音机,然后继续播放下一张图像。我已经在Google上搜索了一些视频,但是它并没有真正帮助我。也许看到针对我的特定问题的代码将有助于我的理解!
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);
最佳答案
试试这个。您实际上是针对包装器,而不是输入。
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);
关于javascript - 您将如何在此处实现滑块的计时器?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37669038/