我正在尝试制作基于w3 css的自动Javascript幻灯片，当你点击箭头时切换到手动。除此之外，在开始时，如果未单击上一个或下一个箭头，幻灯片将运行2个循环。
加载页面后，幻灯片显示处于自动模式。那个时候，如果我们点击上一个或下一个箭头，它应该在那时停在幻灯片上。相反，它显示一个看起来很丑的白色屏幕。我正在添加pause变量以尝试在点击箭头时实现暂停功能。请告诉我我做错了什么。注意 - 我对Javascript很新。
以下是我的代码段 -
var paused = false;
var myIndex = 0;
var counter = 0;
var maxLength = 0;
var loops = 2;
var interval = 1000; //for testing purposes
function carousel() {
var x = document.querySelectorAll(".mySlides"); //using modern querySelectorAll
maxLength = x.length * loops; //times 2 for two loops
//optimalization here - borrowing Array forEach to loop over node list
Array.prototype.forEach.call(x, function(element) {
element.style.display = "none";
});
counter++; //adding counter
if (paused === false) {
if (myIndex >= x.length) {
myIndex = 0
}; //reset this to zero indexing
x[myIndex].style.display = "block"; //show the slide
if (counter <= maxLength) //ie counter <= 10, execute
{
myIndex++; //add index with every pass
setTimeout(carousel, interval);
Array.prototype.forEach.call(x, function(element) {
element.classList.remove("w3-animate-fading"); //remove the fading
});
}
}
else
{
}
}
carousel();
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
paused = true;
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-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 mySlides">
<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 mySlides">
<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 mySlides">
<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 mySlides">
<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 mySlides">
<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="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right w3-black"
onclick="plusDivs(1)">❯</button>
</div>
答案 0 :(得分：1)
好的，所以我改变了你的幻灯片，这里是更新版本，现在一切似乎都完全正常了。 https://jsfiddle.net/qhx93g1q/3/
//Changed index so 1 is actually first image, rather than starting at 0 index
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();
}
}
else {
}
},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;
}
.fadeIn {
animation-name: fadeIn;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
}
@keyframes fadeIn {
from {opacity:0;}
to {poacity:1;}
}<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 fadeIn 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 fadeIn 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 fadeIn 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 fadeIn 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 fadeIn 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>