大佬教程收集整理的这篇文章主要介绍了带时间间隔的滑块，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我在 https://www.cssscript.com/demo/full-width-horizontal-page-slider-with-pure-html-css/ 的 Jsfiddle 中找到了这个滑块，我对其进行了一些更改。
我试图在循环中每 5 秒自动滑动一次这些部分。目前，它每 5 秒向下滑动一次，但如果您只是访问该页面并在第 3 秒点击标题上的第四部分，2 秒后它会将您带到第二张幻灯片，但实际上它应该带您进入第一部分。
我试图找到一些东西，但不幸的是，我对此的了解非常有限。非常感谢您的帮助。 JSFiddle
<!DOCTYPE HTML>
<HTML>
<head>
<Meta charset="utf-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
<Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1">
<Title>slIDer</Title>
<style>
HTML,body {
height: 100%;
wIDth: 100%;
margin: 0;
padding: 0;
}
.page-slIDer {
height: 100%;
wIDth: 100%;
position: relative;
overflow: hIDden;
background: #120103;
color: #fff;
text-align: center;
}
header {
background: #3e474f;
Box-shadow: 0 0.5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
wIDth: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
Font-size: 1em;
Font-weight: bold;
padding: 0 1em;
}
header label:hover { background: #2e353b; }
.slIDe {
height: 100%;
wIDth: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
Transition: left 0s 0.75s;
}
.slIDe-one { background-image: url(https://unsplash.it/1800/1200?image=222); }
.slIDe-two { background-image: url(https://unsplash.it/1800/1200?image=333); }
.slIDe-three { background-image: url(https://unsplash.it/1800/1200?image=444); }
.slIDe-four { background-image: url(https://unsplash.it/1800/1200?image=555); }
[ID^="slIDe"]:checked + .slIDe {
left: 0;
z-index: 100;
Transition: left 0.65s ease-out;
}
.slIDe h1 {
opacity: 0;
@R_403_4154@: translateY(100%);
Transition: @R_403_4154@ 0.5s 0.5s,opacity 0.5s;
}
[ID^="slIDe"]:checked + .slIDe h1 {
opacity: 1;
@R_403_4154@: translateY(0);
Transition: all 0.5s 0.5s;
}
</style>
</head>
<body>
<div class="page-slIDer">
<header>
<label class="btn slIDe1 active" for="slIDe-1-trigger">Section One</label>
<label class="btn slIDe2" for="slIDe-2-trigger">Section Two</label>
<label class="btn slIDe3" for="slIDe-3-trigger">Section Three</label>
<label class="btn slIDe4" for="slIDe-4-trigger">Section Four</label>
</header>
<input ID="slIDe-1-trigger" type="radio" name="slIDes" checked>
<section class="slIDe slIDe-one">
<h1>Full WIDth Horizontal Page SlIDer Demo</h1>
</section>
<input ID="slIDe-2-trigger" type="radio" name="slIDes">
<section class="slIDe slIDe-two">
<h1>Section Two</h1>
</section>
<input ID="slIDe-3-trigger" type="radio" name="slIDes">
<section class="slIDe slIDe-three">
<h1>Section Three</h1>
</section>
<input ID="slIDe-4-trigger" type="radio" name="slIDes">
<section class="slIDe slIDe-four">
<h1>Section Four</h1>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/AJAX/libs/jquery/2.1.3/jquery.min.Js"></script>
<script>
$('.btn').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
var variabletoCancelinterval = setInterval(function () {
$(".slIDe2").click();
},5000);
var variabletoCancelinterval = setInterval(function () {
$(".slIDe3").click();
},10000);
var variabletoCancelinterval = setInterval(function () {
$(".slIDe4").click();
},15000);
var variabletoCancelinterval = setInterval(function () {
$(".slIDe1").click();
},20000);
</script>
</body>
</HTML>
你可以像这样使用setInterval()
var i = 0;
$('.btn').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
i = $(this).index() + 1;
});
var Interval = setInterval(function(){
i = (i === $('.btn').length) ? 1 : i + 1;
$('.btn.slide'+i).click();
},5000);html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.page-slider {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
background: #120103;
color: #fff;
text-align: center;
}
header {
background: #3e474f;
box-shadow: 0 0.5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: 1em;
font-weight: bold;
padding: 0 1em;
}
header label:hover { background: #2e353b; }
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
transition: left 0s 0.75s;
}
.slide-one { background-image: url(https://unsplash.it/1800/1200?image=222); }
.slide-two { background-image: url(https://unsplash.it/1800/1200?image=333); }
.slide-three { background-image: url(https://unsplash.it/1800/1200?image=444); }
.slide-four { background-image: url(https://unsplash.it/1800/1200?image=555); }
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
transition: left 0.65s ease-out;
}
.slide h1 {
opacity: 0;
transform: translateY(100%);
transition: transform 0.5s 0.5s,opacity 0.5s;
}
[id^="slide"]:checked + .slide h1 {
opacity: 1;
transform: translateY(0);
transition: all 0.5s 0.5s;
}
.btn.active{
background : #62ce36;
color : #fff;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>slider</title>
</head>
<body>
<div class="page-slider">
<header>
<label class="btn slide1 active" for="slide-1-trigger">Section One</label>
<label class="btn slide2" for="slide-2-trigger">Section Two</label>
<label class="btn slide3" for="slide-3-trigger">Section Three</label>
<label class="btn slide4" for="slide-4-trigger">Section Four</label>
</header>
<input id="slide-1-trigger" type="radio" name="slides" checked>
<section class="slide slide-one">
<h1>Full Width Horizontal Page Slider Demo</h1>
</section>
<input id="slide-2-trigger" type="radio" name="slides">
<section class="slide slide-two">
<h1>Section Two</h1>
</section>
<input id="slide-3-trigger" type="radio" name="slides">
<section class="slide slide-three">
<h1>Section Three</h1>
</section>
<input id="slide-4-trigger" type="radio" name="slides">
<section class="slide slide-four">
<h1>Section Four</h1>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
</script>
</body>
</html>以上是大佬教程为你收集整理的带时间间隔的滑块全部内容，希望文章能够帮你解决带时间间隔的滑块所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。