带有自动播放的滑块以及带有CSS HTML JS的下一个和上一个箭头
带有自动播放的滑块以及带有CSS HTML JS的下一个和上一个箭头
提问于 2018-06-03 17:37:53
我是一个初学者，我想知道是否有可能创建一个响应滑块与自动播放(淡入淡出或滑动效果，无关紧要)和导航的下一个和上一个箭头，而不影响自动播放，只是从一个幻灯片更改到另一个。
我已经尝试了在网上找到的多种js解决方案，比如javascript的"setinterval“函数，但我总是遇到同样的问题，一个效果有效，另一个效果无效。
实际上，我已经用html和css做了一个滑块，但是我不能通过添加一个javascript函数来完成。
我对所有的解决方案都持开放态度，即使只有js才有可能。
我现在正在学习一个课程，这是一个项目的一部分。
能做到吗？？
提前谢谢你！
/*progress bar effect*/
@keyframes loading {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(100%);
}
}
/*autoplay effect*/
@keyframes fade {
0% {
opacity: 1
}
45% {
opacity: 1
}
50% {
opacity: 0
}
95% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes fade2 {
0% {
opacity: 0
}
45% {
opacity: 0
}
50% {
opacity: 1
}
95% {
opacity: 1
}
100% {
opacity: 0
}
}
/*Section slider*/
.slider {
width: 100%;
height: 550px;
margin: 20px auto;
position: relative;
}
.slide1,
.slide2 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url('images/bg1.jpg') no-repeat center;
background-size: cover;
animation: fade 30000s infinite linear;
-webkit-animation: fade 30000s infinite linear;
}
.slide2 {
background: url('images/bg2.jpg') no-repeat center;
background-size: cover;
animation: fade2 30000ms infinite linear;
-webkit-animation: fade2 30000ms infinite linear;
}
/*progress bar*/
.progress-bar {
position: absolute;
bottom: -76px;
left: 0px;
height: 80px;
width: 100%;
background: color: rgba(192, 194, 192, 0.8);
border-radius: 0 0 1px 1px;
box-shadow: inset 0px 11px 14px -10px #737373, inset 0px -11px 8px -10px #CCC;
}
.loaded {
height: 4px;
width: 100%;
background: #5cadd3;
animation: 15000ms infinite linear loading normal;
transform-origin: 0%;
}
/*Slider buttons left or right*/
.slider #button_left {
position: absolute;
top: 45%;
left: 0px;
background-color: rgba(70, 70, 70, 0.6);
width: 35px;
height: 70px;
border-radius: 0px 50px 50px 0px;
}
.slider #button_right {
position: absolute;
top: 45%;
right: 0px;
background-color: rgba(70, 70, 70, 0.6);
width: 35px;
height: 70px;
border-radius: 50px 0px 0px 50px;
}
#button_left:hover,
#button_right:hover {
transition: .3s;
background-color: rgba(99, 99, 99, 1);
color: #ffffff;
}
/*left and right arrows for slider with font-awesome*/
.fas.fa-chevron-left {
position: absolute;
left: 0;
top: 30%;
margin-left: 5px;
color: #fff;
font-size: 25px;
}
.fas.fa-chevron-right {
position: absolute;
right: 0;
top: 30%;
margin-right: 5px;
color: white;
font-size: 25px;
} <section id="slideshow">
<div class='slider'>
<div class='slide1'>
<div class="text-slider">
<h1><span class="textblue">WEBAGENCY</span>: lorem ipsum <br> lorem ipsum</h1>
<p> lorem ipsum</p>
<a href="#"> lorem ipsum</a>
</div>
</div>
<div class='slide2'>
<div class="text-slider">
<h1><span class="textblue">WEBAGENCY</span>: lorem ipsum <br> lorem ipsum</h1>
<p> lorem ipsum</p>
<a href="#services"> lorem ipsum</a>
</div>
</div>
<!--<div class="progress-bar"></div>-->
<div class="progress-bar">
<div class="loaded"></div>
</div>
<a href="images/bg1.jpg" id="button_left"><i class="fas fa-chevron-left"></i></a>
<a href="images/bg2.jpg" id="button_right"><i class="fas fa-chevron-right"></i></a>
</div>
</section>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-03 19:01:35
不需要库或框架来做到这一点。所以，我已经不得不这么做了，它并不像看起来那么复杂。首先，我使用css伪类:checked和输入类型单选按钮来选择要显示的幻灯片：
<div id="slider">
<input type="radio" name="slider" checked> <!-- The first slide is displayed by default -->
<div class="slide">...</div>
<input type="radio" name="slider">
<div class="slide">...</div>
...
<div class="prev-button">prev</div>
<div class="next-button">next</div>
</div>和一些css：
#slider > .slide,
#slider > input[type="radio"]{
display:none;
}
#slider > input[type="radio"]:checked + .slide{display:block;}那么，使用js应该会更简单：
window.addEventListener("load",function(){
let timer; let delay = 4000;
let loader = document.querySelector("#slider .loader");
let inputs = Array.from(document.querySelectorAll('#slider > input[type="radio"]'));
//first, the go function that choose which input to check
let go = (prev=false)=>{
let checked = document.querySelector('#slider > input[type="radio"]:checked');
let index = inputs.indexOf(checked);
let next = ((prev) ? index -1 : index + 1);
if(next >= inputs.length) next = 0; //restart from beginning
else if(next < 0 ) next = inputs.length -1; //go to the last slide
//restart the progress bar
loader.classList.remove("loader");
loader.classList.add("loader");
inputs[next].checked = true;
};
//Allow you to define some sort of recursive timeout, otherwise it works only once
let defineTimer = (callback)=>{
timer = setTimeout(()=>{
callback();
defineTimer(callback);
},delay);
};
//next, autoplay :
defineTimer(go);
//next, buttons:
let next = document.querySelector("#slider > .next-button");
let prev = document.querySelector("#slider > .prev-button");
//clear the timer with `clearTimeout` each time you click on a button, if you don't
//and the user click on a button 3900ms after the autoplay call, the next/prev slide will only be displayed
//for 100ms and then switch to the next, which can be disturbing for the user.
next.addEventListener("click",()=>{
go();
clearTimeout(timer);
defineTimer(go);
});
prev.addEventListener("click",()=>{
go(true);
clearTimeout(timer);
defineTimer(go);
});
});它的工作原理:每次调用go函数时，它都会根据当前检查的输入选择下一个或前一个输入进行检查。所以你可以从计时器调用它，也可以不从计时器调用，这没有任何区别。
希望它能回答您的问题:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50665020
复制相关文章
相似问题