【发布时间】：2021-02-26 22:08:55
【问题描述】：
我在 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;
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;
}
</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>
【问题讨论】：
-
我对您的代码进行了一些编辑。试试这个jsfiddle.net/4hvs0mrb/1