[英]How can i add a smooth transition effect between slides?
我不擅长编码,但我尝试了一些方法来设置过渡效果,但没有奏效。 你们能帮帮我吗?我会很感激的...................................... ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... …………
爪哇
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;
// Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
// Init slider
function startSlide() {
reset();
sliderImages[0].style.display = "block";
}
// Show prev
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
// Show next
function slideRight() {
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
// Left arrow click
arrowLeft.addEventListener("click", function() {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
// Right arrow click
arrowRight.addEventListener("click", function() {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
css
body,
#slider,
.wrap,
.slide-content {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.wrap {
position: relative;
}
.slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* .slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
} */
.delimitare {
background-color: r#141313ed;
width: 100%;
height: 100%;
padding-left: 10%;
padding-right: 10%;
}
.content-interior {
background-color: #141313;
width: 100%;
height: 100%;
}
.slide-content span {
font-size: 5rem;
color: #fff;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -35px;
width: 0;
height: 0;
border-style: solid;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent #fff transparent transparent;
left: 0;
margin-left: 30px;
}
#arrow-right {
border-width: 30px 0 30px 40px;
border-color: transparent transparent transparent #fff;
right: 0;
margin-right: 30px;
}
html
<div class="wrap">
<div id="arrow-left" class="arrow"></div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
</div>
</div>
</div>
<div class="slide slide2">
<div class="slide-content">
<span>Image Two</span>
</div>
</div>
<div class="slide slide3">
<div class="slide-content">
<span>Image Three</span>
</div>
</div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
到目前为止,你做得很好! 有很多不同的方法可以完成渐变幻灯片,但 CSS“过渡”属性是一种简单的方法。
但是,这里的问题是您无法转换“显示”属性。 从“显示:块”到“显示:无”不能转换。 它要么显示要么不显示。 开或关,就像一个布尔值。
通过更新您提供的代码,我整理了一个工作示例。 我没有使用显示在幻灯片之间切换,而是对其进行了更新以更改不透明度。 不透明度可以转换,所以我也添加了 CSS 来处理它。
(我还必须将幻灯片位置设置为绝对位置,以便幻灯片堆叠在一起。)
快速旁注:当您最初共享代码时,您将 JavaScript 标记为“Java”。 Java 和 JavaScript 是两种不同的编码语言,所以以后要小心。
let sliderImages = document.querySelectorAll(".slide"), arrowLeft = document.querySelector("#arrow-left"), arrowRight = document.querySelector("#arrow-right"), current = 0; // Clear all images function reset() { for (let i = 0; i < sliderImages.length; i++) { sliderImages[i].style.opacity = "0"; } } // Init slider function startSlide() { reset(); sliderImages[0].style.opacity = "1"; } // Show prev function slideLeft() { reset(); sliderImages[current - 1].style.opacity = "1"; current--; } // Show next function slideRight() { reset(); sliderImages[current + 1].style.opacity = "1"; current++; } // Left arrow click arrowLeft.addEventListener("click", function () { if (current === 0) { current = sliderImages.length; } slideLeft(); }); // Right arrow click arrowRight.addEventListener("click", function () { if (current === sliderImages.length - 1) { current = -1; } slideRight(); }); startSlide();
body, #slider, .wrap, .slide-content { margin: 0; padding: 0; width: 100%; height: 100vh; overflow-x: hidden; background-color: blue; } .wrap { position: relative; } .slide { background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 0.5s ease; position: absolute; left: 0; right: 0; margin: auto; } .slide-content { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .delimitare { background-color: r#141313ed; width: 100%; height: 100%; padding-left: 10%; padding-right: 10%; } .content-interior { background-color: #141313; width: 100%; height: 100%; } .slide-content span { font-size: 5rem; color: #fff; } .arrow { cursor: pointer; position: absolute; top: 50%; margin-top: -35px; width: 0; height: 0; border-style: solid; z-index: 2; } #arrow-left { border-width: 30px 40px 30px 0; border-color: transparent #fff transparent transparent; left: 0; margin-left: 30px; } #arrow-right { border-width: 30px 0 30px 40px; border-color: transparent transparent transparent #fff; right: 0; margin-right: 30px; }
<div class="wrap"> <div id="arrow-left" class="arrow"> </div> <div id="slider"> <div class="slide slide1"> <div class="slide-content"> <span>Image One</span> </div> </div> <div class="slide slide2"> <div class="slide-content"> <span>Image Two</span> </div> </div> <div class="slide slide3"> <div class="slide-content"> <span>Image Three</span> </div> </div> </div> <div id="arrow-right" class="arrow"></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.