堆棧內存溢出
  簡體   English   中英

如何通過javascript創建自動幻燈片圖像？

[英]How to create auto slide images by javascript?

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

問題描述

我正在嘗試制作自動幻燈片圖像。 我已經搜索過，但是沒有找到可以幫助我的解決方案。

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

3 個解決方案

解決方案1
 1 已采納  2018-07-27 08:05:24

這是演示

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

解決方案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>

您可以參考以下鏈接獲取解決方案。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto

解決方案3
 0  2018-07-27 08:11:11

您可以使用javascript，但我建議您使用引導程序來執行此操作。 我在嘗試在我的網站上進行這項工作時遇到了痛苦，我強烈建議您使用引導程序，因為它易於使用，如果出現問題，則更容易修復。 我推薦評論中提到的w3schools文章。 https://www.w3schools.com/bootstrap/bootstrap_carousel.asp 。 如果您確實想繼續使用JS，祝您一切順利:)

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何制作圖像的自適應自動幻燈片？ 如何使用純 Javascript 或純 Javascript 庫創建背景圖像幻燈片 JavaScript 汽車幻燈片 如何使用 JavaScript 從側面滑入圖像？ 如何使用rails視圖內容（不是圖像）自動滑動主頁輪播 用JavaScript創建自動幻燈片圖像的方法是什么？ 圖片的Javascript幻燈片放映 如何使幻燈片自動播放並更改交換以淡入JavaScript 如何使用javascript制作簡單的自動播放幻燈片？ 帶有幻燈片的一組圖像-javascript
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM