stackoom
  简体   繁体   中英

How to create auto slide images by javascript?

 原文  2018-07-27 07:30:55  6   3    javascript/ html/ css

Question

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.

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 answers

solution1
 1 ACCPTED  2018-07-27 08:05:24

Here's the Demo

let is EcmaScript6, i change using var .

Html 

// Nothing change...

Js 

// 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);
}

solution2
 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

solution3
 0  2018-07-27 08:11:11

You can use javascript, but I would suggest using bootstrap to do this. 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. https://www.w3schools.com/bootstrap/bootstrap_carousel.asp . If you do continue to want to use JS I wish you all the best :)

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to make a responsive auto slide for images? How to create a slide of background images using Pure Javascript or a pure Javascript library JavaScript Auto Slide Show How to slide images in from the side using JavaScript? How to auto-slide the homepage carousel with rails views content (not images) What method to create auto slideshow images in javascript? Javascript slide show of images How make slide to auto play and change swap to fade in JavaScript How to make a simple auto playing slide show with javascript? a set of images with a slide show - javascript
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM