[英]How to create auto slide images by javascript?
我正在尝试制作自动幻灯片图像。 我已经搜索过,但是没有找到可以帮助我的解决方案。
我有var slideImages
来保留所有图像并设置setInterval
但是我的图像仍然不动。
也许我缺少一些东西。 一些建议将不胜感激,谢谢。
请看一下我的代码(当我在此处发布代码时,我不知道为什么我的图像不只显示一张图像)
// slideshow let slideImages = document.getElementsByClassName("slide"); let i = 0; function showImages() { for (i = 0; i < slideImages.length; i++) { slideImages[0].style.display = 'block'; } }; function slideshow() { if (i < slideImages.length - 1) { i++; } else { i = 0; } } setInterval(slideshow(), 2000);
/*slideshow*/ #slide1 { background-image: url(https://preview.ibb.co/mV3TR7/1.jpg); } #slide2 { background-image: url(https://preview.ibb.co/bSCBeS/2.jpg); } #slide3 { background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg); } #slideshow { position: relative; max-width: 800px; margin: 0 auto; } .slide { background-repeat: no-repeat; background-position: center; background-size: 100% 100%; width: 800px; height: 400px; margin: 0 auto; max-width: 100%; z-index: 1; } .slidecontent { position: absolute; color: white; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); }
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="index2.css" /> </head> <body> <div id="slideshow"> <div id="slide1" class="slide"> <span class="slidecontent">SlideImage1</span> </div> <div id="slide2" class="slide"> <span class="slidecontent">SlideImage2</span> </div> <div id="slide3" class="slide"> <span class="slidecontent">SlideImage3</span> </div> </div> <script src="jquery.js"></script> <script src="index2.js"></script> </body> </html>
这是演示
let
是EcmaScript6,我使用var
更改。
HTML
// Nothing change...
s
// slideshow
var slideImages = document.getElementsByClassName("slide");
var counter = 0; //set index for timer
var duration = 2000; //set duration
//Hide each slide at first
function hideAllImages() {
for (var i = 0; i < slideImages.length; i = i + 1) {
/* console.log(slideImages[i]); */
slideImages[i].style.opacity = 0;
}
}
function slideshow() {
hideAllImages();
/* go to next slide */
counter = counter + 1;
/* reset to first slide when looping */
if (counter > slideImages.length - 1) {
counter = 0;
}
console.log(counter);
/* show the current slide */
slideImages[counter].style.opacity = 1;
}
setInterval(function() {
slideshow();
}, duration);
的CSS
/*slideshow*/
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
#slideshow {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.slide {
position: absolute;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 800px;
height: 400px;
margin: 0 auto;
max-width: 100%;
transition: opacity 300ms;
z-index: 1;
}
.slidecontent {
position: absolute;
color: white;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
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;} body {font-family: Verdana, sans-serif;} .mySlides {display: none;} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* 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 { height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { 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} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .text {font-size: 11px} }
<!DOCTYPE html> <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="https://preview.ibb.co/mV3TR7/1.jpg" style="width:100%"> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="https://preview.ibb.co/bSCBeS/2.jpg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="https://preview.ibb.co/kgG9Yn/3.jpg" 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>
您可以参考以下链接获取解决方案。
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto
您可以使用javascript,但我建议您使用引导程序来执行此操作。 我在尝试在我的网站上进行这项工作时遇到了痛苦,我强烈建议您使用引导程序,因为它易于使用,如果出现问题,则更容易修复。 我推荐评论中提到的w3schools文章。 https://www.w3schools.com/bootstrap/bootstrap_carousel.asp 。 如果您确实想继续使用JS,祝您一切顺利:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.