如何通过javascript创建自动幻灯片图像？
[英]How to create auto slide images by javascript?
问题描述
I'm trying to make autoslide images. 
我正在尝试制作自动幻灯片图像。 I've searched but haven't found a solution that can help me. 我已经搜索过，但是没有找到可以帮助我的解决方案。
I have var slideImages to keep all the images and set setInterval but my images still don't move. 我有var slideImages来保留所有图像并设置setInterval但是我的图像仍然不动。
Maybe there is something that I'm missing. 也许我缺少一些东西。 Some advice would be much appreciated, thank you. 一些建议将不胜感激，谢谢。
Please take a look at my code (When i posted my code here i don't know why my images didn't show just only one image) 请看一下我的代码（当我在此处发布代码时，我不知道为什么我的图像不只显示一张图像）
// 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>
3 个解决方案
解决方案1
1 已采纳 2018-07-27 08:05:24
let is EcmaScript6, i change using var . let是EcmaScript6，我使用var更改。
Html HTML
// Nothing change...
Js 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 的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);
}
解决方案2
1 2018-07-27 10:17:44
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>
You can refer the following link for the solution. 您可以参考以下链接获取解决方案。
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto
解决方案3
0 2018-07-27 08:11:11
You can use javascript, but I would suggest using bootstrap to do this. 您可以使用javascript，但我建议您使用引导程序来执行此操作。 I suffered while trying to make this work on my website and I would highly suggest using bootstrap because of its ease of use and if something goes wrong with it, it is a lot easier to fix. 我在尝试在我的网站上进行这项工作时遇到了痛苦，我强烈建议您使用引导程序，因为它易于使用，如果出现问题，则更容易修复。 I recommend the w3schools article that was mentioned in the comments. 我推荐评论中提到的w3schools文章。 https://www.w3schools.com/bootstrap/bootstrap_carousel.asp . https://www.w3schools.com/bootstrap/bootstrap_carousel.asp 。 If you do continue to want to use JS I wish you all the best :) 如果您确实想继续使用JS，祝您一切顺利:)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.