使用下一个和上一个按钮自动和手动更改幻灯片
[英]change slideshow automaticlally and manually with next and prev buttons
问题描述
I have this slideshow taken from w3schools that changes the image automatically every so often.
我有这张幻灯片来自 w3schools，它每隔一段时间就会自动更改图像。 But I wanted that in addition to changing the image automatically, it would also change it manually with the "prev" and "next" buttons, but the "prev" and "next" buttons don't appear anywhere in this automatic version of the slideshow.但是我希望除了自动更改图像之外，它还可以使用“prev”和“next”按钮手动更改它，但是“prev”和“next”按钮不会出现在这个自动版本的任何地方幻灯片。 I wanted to know what I should add to make these buttons appear and work.我想知道我应该添加什么来使这些按钮出现并起作用。 thanks.谢谢。
var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 2000); // Change image every 2 seconds } * {box-sizing:border-box} /* Slideshow container */.slideshow-container { /*max-width: 100px;*/ width:100px; position: relative; margin: auto; } /* Hide the images by default */.mySlides { display: none; } /* Next & previous buttons */.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; background-color: rgba(0,0,0,0.8); } /* Position the "next button" to the right */.next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */.text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }.active, .dot:hover { background-color: #717171; } /* Fading animation */.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Automatic Slideshow</h2> <p>Change image every 2 seconds:</p> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="1.jpeg" style="width:100%"> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="2.jpeg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="3.jpeg" style="width:100%"> <div class="text">Caption Three</div> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> </body> </html>1 个解决方案
解决方案1
0 2020-12-10 19:47:46
i added this to javascript file:我将此添加到 javascript 文件中：
function plusSlides(n) {
showSlides(slideIndex += n);
}
and this to html file:这到 html 文件：
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
and this to css file:这是 css 文件：
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
background-color: rgba(0,0,0,0.8);
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
and now it changes both ways, (automatic and manual), but when you change the image manually, the timeout for the automatic mode changes and the image change faster, and it only shows two images and doesn't show the third one, and in general do strange things.现在它改变了两种方式（自动和手动），但是当你手动改变图像时，自动模式的超时改变并且图像改变更快，并且它只显示两个图像而不显示第三个图像，并且一般都会做奇怪的事情。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.