抱歉,可能存在重复,但是我没有找到解决问题的方法。关于我的问题。我正在尝试仅使用js和CSS创建幻灯片轮播。我需要的是当我们按下“前进”或“后退”按钮时交替显示的幻灯片(例如,上一张幻灯片向左移动,而当按下“前进”按钮时,新幻灯片同时从右侧出现)。
代码在这里:
var slideIndex = 0;
var prev_slideIndex = slideIndex;
function myanimate() {
str = 'slideIndex=' + slideIndex + ' prev_slideIndex=' + prev_slideIndex;
var slides = document.getElementsByClassName("child");
for (var i = 0; i < slides.length; i++) slides[i].style.display = "none";
if (prev_slideIndex < slideIndex) {
if (slideIndex > 3) slideIndex = 0;
slides[prev_slideIndex].style.left = '-100%';
slides[prev_slideIndex].style.marginleft = '0%';
slides[slideIndex].style.left = '0%';
slides[slideIndex].style.marginleft = '0%';
slides[prev_slideIndex].style.animation = slides[slideIndex].style.animation = 'caroussel 1.5s';
} else {
if (slideIndex < 0) slideIndex = 3;
slides[prev_slideIndex].style.left = '100%';
slides[prev_slideIndex].style.marginleft = '0%';
slides[slideIndex].style.left = '0%';
slides[slideIndex].style.marginleft = '0%';
slides[prev_slideIndex].style.animation = slides[slideIndex].style.animation = 'caroussel_back 1.5s';
}
slides[prev_slideIndex].style.display = 'block';
slides[slideIndex].style.display = 'block';
prev_slideIndex = slideIndex;
str += ' final prev_slideIndex=' + prev_slideIndex;
document.getElementById("text").innerHTML = str;
}
.parent {
background-color: red;
display: block;
position: relative;
width: 600px;
height: 100px;
padding-top: 10px;
padding-bottom: 10px;
overflow: hidden;
}
.child {
background-color: green;
display: block;
position: absolute;
width: 100%;
height: 100px;
color: #FFFFFF;
font-size: 24px;
text-align: center;
}
@keyframes caroussel {
from {
margin-left: 100%
}
to {
margin-left: 0%
}
}
@keyframes caroussel_back {
0% {
margin-left: -100%
}
100% {
margin-left: 0%
}
}
<input type="submit" value='forward' title="sdg" onclick="slideIndex++;myanimate();">
<input type="submit" value='backward' title="sdg" onclick="slideIndex--;myanimate();">
<br>
<div class="parent">
<div class="child" style="background-color:yellow;left:0%;">
Caption1<br>Caption1 Caption1 Caption1 Caption Caption Caption Caption Caption Caption
</div>
<div class="child" style="left:100%;">
Caption2<br>Caption2 Caption2 Caption2 Caption2 Caption Caption Caption Caption Caption
</div>
<div class="child" style="background-color:magenta;left:100%;">
Caption3<br>Caption3 Caption3 Caption3 Caption3 Caption Caption Caption Caption Caption
</div>
<div class="child" style="background-color:cyan;left:100%;">
Caption4<br>Caption4 Caption4 Caption4 Caption4 Caption Caption Caption Caption Caption
</div>
</div>
<br>
<span id="text"></span>
如果我们交替按下“前进”和“后退”按钮(我们可以观察到两个幻灯片),则它可以正常工作,但是如果我们多次按下其中一个按钮(上一张幻灯片会消失),则它不能正常工作。
有谁知道为什么它不能正常工作,或者是否有任何想法来改进代码?
先感谢您。
我在Firefox 74.0(32位)中进行了测试。CSS中的“ transform:translateX(...)”给了我相同的行为。
对于轮播prev_slideIndex
的animation
上一个迭代,具有的幻灯片已具有相同的值。因此,你需要使用回流焊迫使这个幻灯片播放同样的动画更多的时间:
slides[prev_slideIndex].offsetHeight; /* trigger reflow */
var slideIndex = 0;
var prev_slideIndex = slideIndex;
function myanimate() {
str = 'slideIndex=' + slideIndex + ' prev_slideIndex=' + prev_slideIndex;
var slides = document.getElementsByClassName("child");
for (var i = 0; i < slides.length; i++) slides[i].style.display = "none";
if (prev_slideIndex < slideIndex) {
if (slideIndex > 3) slideIndex = 0;
slides[prev_slideIndex].style.left = '-100%';
slides[prev_slideIndex].style.marginleft = '0%';
slides[slideIndex].style.left = '0%';
slides[slideIndex].style.marginleft = '0%';
slides[prev_slideIndex].offsetHeight; /* trigger reflow */
slides[prev_slideIndex].style.animation = slides[slideIndex].style.animation = 'caroussel 1.5s';
} else {
if (slideIndex < 0) slideIndex = 3;
slides[prev_slideIndex].style.left = '100%';
slides[prev_slideIndex].style.marginleft = '0%';
slides[slideIndex].style.left = '0%';
slides[slideIndex].style.marginleft = '0%';
slides[prev_slideIndex].offsetHeight; /* trigger reflow */
slides[prev_slideIndex].style.animation = slides[slideIndex].style.animation = 'caroussel_back 1.5s';
}
slides[prev_slideIndex].style.display = 'block';
slides[slideIndex].style.display = 'block';
prev_slideIndex = slideIndex;
str += ' final prev_slideIndex=' + prev_slideIndex;
document.getElementById("text").innerHTML = str;
}
.parent {
background-color: red;
display: block;
position: relative;
width: 600px;
height: 100px;
padding-top: 10px;
padding-bottom: 10px;
overflow: hidden;
}
.child {
background-color: green;
display: block;
position: absolute;
width: 100%;
height: 100px;
color: #FFFFFF;
font-size: 24px;
text-align: center;
}
@keyframes caroussel {
from {
margin-left: 100%
}
to {
margin-left: 0%
}
}
@keyframes caroussel_back {
0% {
margin-left: -100%
}
100% {
margin-left: 0%
}
}
<input type="submit" value='forward' title="sdg" onclick="slideIndex++;myanimate();">
<input type="submit" value='backward' title="sdg" onclick="slideIndex--;myanimate();">
<br>
<div class="parent">
<div class="child" style="background-color:yellow;left:0%;">
Caption1<br>Caption1 Caption1 Caption1 Caption Caption Caption Caption Caption Caption
</div>
<div class="child" style="left:100%;">
Caption2<br>Caption2 Caption2 Caption2 Caption2 Caption Caption Caption Caption Caption
</div>
<div class="child" style="background-color:magenta;left:100%;">
Caption3<br>Caption3 Caption3 Caption3 Caption3 Caption Caption Caption Caption Caption
</div>
<div class="child" style="background-color:cyan;left:100%;">
Caption4<br>Caption4 Caption4 Caption4 Caption4 Caption Caption Caption Caption Caption
</div>
</div>
<br>
<span id="text"></span>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句