gpt4 book ai didi

javascript - css 动画无法与 javascript 代码一起使用

转载 作者:行者123 更新时间:2023-12-03 03:18:47 25 4
gpt4 key购买 nike

我正在尝试制作一个基于 w3 css 的带有淡入淡出动画的自动 Javascript 幻灯片,当您点击箭头时,该幻灯片会切换到手动。除此之外,在开始时,如果未单击上一个或下一个箭头,幻灯片将循环运行 2 次。在幻灯片播放完 2 个循环之前单击上一个或下一个箭头也会将幻灯片切换为手动。

问题出在 W3 CSS 淡入淡出动画上。如果我保留它,在自动循环结束时,幻灯片会不断淡入和淡出,而它应该保持静态。因此,我必须使用以下代码删除淡入淡出动画 -

 Array.prototype.forEach.call(x, function(element) {
element.classList.remove("w3-animate-fading"); //remove the fading
});

请指出我做错了什么,动画无法正常使用 javascript(请注意 - 我是 Javascript 新手)。这是完整的片段,包括删除动画代码 -

var index = 1;
var paused = false;
var slideShow = [];
var counter = 0;
var maxLength = 0;
var loops = 2;
var interval = 2000; //for testing purposes

var x = document.getElementsByClassName("slideShow");
maxLength = x.length * loops; //times 2 for two loops

for (i=0; i<x.length; i++) {
slideShow[i] = document.getElementsByClassName("slideShow")[i];
slideShow[i].style.display = "none";
}

slideShow[0].style.display = "block";

var slides = setInterval(function() {
counter++; //adding counter
if (counter <= maxLength) //ie counter <= 10, execute
{
if (index < slideShow.length) {

index++;
showDivs();

}
else {
index = 1;
showDivs();
}
}
Array.prototype.forEach.call(x, function(element) {
element.classList.remove("w3-animate-fading"); //remove the fading
});
},interval);

function control(n) {
clearInterval(slides);

if (index+n > slideShow.length) {
index = 1;
}
else if (index+n <= 0) {
index = slideShow.length;
}
else {
index += n;
}
showDivs();
}

function showDivs() {
//Hide all slideShow elements, and then show only the targeted element
for (i=1; i<=slideShow.length; i++) {
slideShow[i-1].style.display = "none";
}
slideShow[index-1].style.display = "block";
}
.w3-content.w3-display-container {
margin-top: 100px;
}

button.w3-button.w3-display-left.w3-black {
position: relative;
left: -50px;
}

button.w3-button.w3-display-right.w3-black {
position: relative;
right: -118px;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="w3-content w3-display-container " style="max-width:150px">

<div class="w3-display-container w3-animate-fading slideShow">
<a href="" target="_blank" title="slide1">
<img class="" src="img01.jpg" style="width:100%">
</a>
<div class="w3-display-bottomleft w3-large w3-container w3- padding-16 w3-black">
<a href="" target="_blank" title="slide1">Slide-1 (read more)</a>
</div>
</div>

<div class="w3-display-container w3-animate-fading slideShow">
<a href="" target="_blank" title="slide2">
<img class="" src="img02.jpg" style="width:100%">
</a>
<div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
<a href="" target="_blank" title="slide2">Slide-2 (more)</a>
</div>
</div>

<div class="w3-display-container w3-animate-fading slideShow">
<a href="" target="_blank" title="slide3">
<img class="" src="img03.jpg" style="width:100%">
</a>
<div class="w3-display-topleft w3-large w3-container
w3-padding-16 w3-black">
<a href="" target="_blank" title="slide3">Slide-3 (read more)</a>
</div>
</div>

<div class="w3-display-container w3-animate-fading slideShow">
<a href="" target="_blank" title="slide4">
<img class="" src="img04.jpg" style="width:100%">
</a>
<div class="w3-display-topright w3-large w3-container
w3-padding-16 w3-black">
<a href="" target="_blank" title="slide4">Slide-4 (read more)</a>
</div>
</div>

<div class="w3-display-container w3-animate-fading slideShow">
<a href="" target="_blank" title="slide5">
<img class="" src="img05.jpg" style="width:100%">
</a>
<div class="w3-display-middle w3-large w3-container
w3-padding-16 w3-black">
<a href="" target="_blank" title="slide5">Slide-5 (read more)</a>
</div>
</div>

<button class="w3-button w3-display-left w3-black" onclick="control(-1)"><</button>
<button class="w3-button w3-display-right w3-black" onclick="control(1)">></button>

</div>

最佳答案

删除这个,

 Array.prototype.forEach.call(x, function(element) {
element.classList.remove("w3-animate-fading"); //remove the fading
});

并有条件地添加和删除事件幻灯片的淡入淡出类,

slideShow[0].className = "w3-animate-fading slideShow";
slideShow[index-1].className = "w3-animate-fading slideShow";

查看代码片段

var index = 1;
var paused = false;
var slideShow = [];
var counter = 0;
var maxLength = 0;
var loops = 2;
var interval = 2000; //for testing purposes

var x = document.getElementsByClassName("slideShow");
maxLength = x.length * loops; //times 2 for two loops

for (i=0; i<x.length; i++) {
slideShow[i] = document.getElementsByClassName("slideShow")[i];
slideShow[i].style.display = "none";
}

slideShow[0].style.display = "block";
slideShow[0].className = "w3-animate-fading slideShow";

var slides = setInterval(function() {
counter++; //adding counter
if (counter <= maxLength) //ie counter <= 10, execute
{
if (index < slideShow.length) {

index++;
showDivs();

}
else {
index = 1;
// Here add the parameter for identify loop ends
showDivs(true);
}
}

},interval);

function control(n) {
clearInterval(slides);

if (index+n > slideShow.length) {
index = 1;
}
else if (index+n <= 0) {
index = slideShow.length;
}
else {
index += n;
}
showDivs();
}

function showDivs(value) {
//Hide all slideShow elements, and then show only the targeted element
for (i=1; i<=slideShow.length; i++) {
slideShow[i-1].style.display = "none";
}
slideShow[index-1].style.display = "block";

if(value) { // Here check the condition if loop ends remove fade class from slide

slideShow[index-1].classList.remove("w3-animate-fading");

} else { // otherwise add fade class to slide

slideShow[index-1].className = "w3-animate-fading";

// after that remove class after some time for remove fade
setTimeout(function(){
slideShow[index-1].classList.remove("w3-animate-fading");
},1000);
}
}
.w3-content.w3-display-container {
margin-top: 100px;
}

button.w3-button.w3-display-left.w3-black {
position: relative;
left: -50px;
}

button.w3-button.w3-display-right.w3-black {
position: relative;
right: -118px;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="w3-content w3-display-container " style="max-width:150px">

<div class="w3-display-container w3-animate-fading slideShow">
<a href="" target="_blank" title="slide1">
<img class="" src="img01.jpg" style="width:100%">
</a>
<div class="w3-display-bottomleft w3-large w3-container w3- padding-16 w3-black">
<a href="" target="_blank" title="slide1">Slide-1 (read more)</a>
</div>
</div>

<div class="w3-display-container w3-animate-fading slideShow">
<a href="" target="_blank" title="slide2">
<img class="" src="img02.jpg" style="width:100%">
</a>
<div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
<a href="" target="_blank" title="slide2">Slide-2 (more)</a>
</div>
</div>

<div class="w3-display-container w3-animate-fading slideShow">
<a href="" target="_blank" title="slide3">
<img class="" src="img03.jpg" style="width:100%">
</a>
<div class="w3-display-topleft w3-large w3-container
w3-padding-16 w3-black">
<a href="" target="_blank" title="slide3">Slide-3 (read more)</a>
</div>
</div>

<div class="w3-display-container w3-animate-fading slideShow">
<a href="" target="_blank" title="slide4">
<img class="" src="img04.jpg" style="width:100%">
</a>
<div class="w3-display-topright w3-large w3-container
w3-padding-16 w3-black">
<a href="" target="_blank" title="slide4">Slide-4 (read more)</a>
</div>
</div>

<div class="w3-display-container w3-animate-fading slideShow">
<a href="" target="_blank" title="slide5">
<img class="" src="img05.jpg" style="width:100%">
</a>
<div class="w3-display-middle w3-large w3-container
w3-padding-16 w3-black">
<a href="" target="_blank" title="slide5">Slide-5 (read more)</a>
</div>
</div>

<button class="w3-button w3-display-left w3-black" onclick="control(-1)"><</button>
<button class="w3-button w3-display-right w3-black" onclick="control(1)">></button>

</div>

关于javascript - css 动画无法与 javascript 代码一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46663036/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com