Question

我正在尝试制作自动幻灯片图像。我已经搜索过，但是没有找到可以帮助我的解决方案。

我有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>

Answer 1

这里是Demo

let是EcmaScript6，我使用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);
}

Answer 2

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创建自动幻灯片图像？

2 个答案: