0
我正在嘗試使用基於w3 css的自動Javascript幻燈片放映，當您點擊箭頭時切換到手動模式。除此之外，在開始時，如果未點擊前一個或下一個箭頭，幻燈片將運行2個循環。在幻燈片播放的2個循環之前單擊上一個或下一個箭頭也會將幻燈片切換爲手動。css動畫不能使用javascript代碼
問題在於W3Css衰落動畫。如果我保留它，在自動循環結束時，幻燈片會保持淡入淡出狀態，同時應保持靜止。所以，我用下面的代碼刪除衰落動畫 -
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++;
\t \t showDivs();
}
else {
\t \t index = 1;
\t \t showDivs();
\t }
}
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 {
\t \t 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="" \t target="_blank" title="slide1">
<img class="" src="img01.jpg" \t style="width:100%">
</a>
<div class="w3-display-bottomleft w3-large \t 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> \t
<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 \t
w3-padding-16 w3-black">
<a href="" target="_blank" title="slide5">Slide-5 (read \t 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>
你必須只修復褪色問題，或繼續下一個後動畫或上一個按鈕，點擊？ @ user20152015 –
感謝您的評論@SuriyaSubramaniyan我想保持整個CSS動畫的衰落 - 即使一個或下一個按鈕，點擊 – user20152015
見我的答案我想是這樣它會作品@ user20152015 –