当前位置： 文江博客 话题详情

从文件夹中动态加载幻灯片的图像

发布于 2025-01-27 07:50:25 字数 3584 浏览 1 评论 0 原文

我的任务是创建一个包含幻灯片的网页，并从文件夹中动态获取显示的图像。 对于幻灯片，我使用了此“教程”：。 我根据自己的需求进行了一些修改 - 就像魅力一样。 唯一的开放任务是图像动态加载的零件。我需要将文件夹中的每个图像添加到身体中，因此我的JS包含幻灯片的图像。此外，对于每个图像，我都想添加另一个“子弹点”，这表示当前位置。

html 

<!DOCTYPE html>
<html>
<head>
<title>Slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Linking CSS-->
<link rel="stylesheet" href="style.css"/>

</head>
<body>

<div class="mySlides fade">
    <img src="images/rick.jpg" style="width:100%">
</div>
      
<div class="mySlides fade">
    <img src="images/rick2.png" style="width:100%">
</div>
      
<div class="mySlides fade">
    <img src="images/rick3.jpg" style="width:100%">
</div>

<div class="mySlides fade">
    <img src="images/rick4.jpg" style="width:100%">
</div>

<div class="mySlides fade">
    <img src="images/rick6.jpg" style="width:100%">
</div>

</div>


<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span>
  <span class="dot"></span>
</div>

<!--Linking JS-->
<script src="script.js"></script>


</body>
</html>

css 

* {box-sizing: border-box;}
* {margin: 0; padding: 0;}
body {
  overflow: hidden; /* hiding scrollbars */
  font-family: Verdana, sans-serif;
}

img {vertical-align: middle;}


.mySlides {
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px; /* distance between dots */
  background-color: #bbb; /* maybe change to RS */
  display: inline-block; /* inline-block */
  position: relative; top:-70px;
  border-radius: 50%;
 
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@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}
}

javascript 

let slideIndex = 0;
showSlides();

//Function to make automatic slideshow
function showSlides() {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let 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, 20000); // Change image every 2 seconds
}

目标是使用幻灯片放置一个运行的网页，因此，当一个人向图像文件夹中添加新图像时，我i不必

<div class="mySlides fade">
    <img src="images/image.xy" style="width:100%">
</div>

在

<span class="dot"></span>

​ ＆lt; div style =“ text-align：center”＆gt; ＆lt;/div＆gt;

对实现这一目标的任何帮助都非常感谢。 谢谢你！

原文

my task is to create a webpage containing a slideshow, dynamically getting the displayed images from a folder.
For the slideshow I used this "tutorial": https://www.w3schools.com/howto/howto_js_slideshow.asp.
I did some modifications based on my needs - works like a charm.
The only open task is the part with the dynamic loading of the images. I need every image in a folder to be added to the body, so my js includes the image to the slideshow. Additionally, for every image I want to add another "bullet point", which indicates the current position.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Linking CSS-->
<link rel="stylesheet" href="style.css"/>

</head>
<body>

<div class="mySlides fade">
    <img src="images/rick.jpg" style="width:100%">
</div>
      
<div class="mySlides fade">
    <img src="images/rick2.png" style="width:100%">
</div>
      
<div class="mySlides fade">
    <img src="images/rick3.jpg" style="width:100%">
</div>

<div class="mySlides fade">
    <img src="images/rick4.jpg" style="width:100%">
</div>

<div class="mySlides fade">
    <img src="images/rick6.jpg" style="width:100%">
</div>

</div>


<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span>
  <span class="dot"></span>
</div>

<!--Linking JS-->
<script src="script.js"></script>


</body>
</html>

CSS

* {box-sizing: border-box;}
* {margin: 0; padding: 0;}
body {
  overflow: hidden; /* hiding scrollbars */
  font-family: Verdana, sans-serif;
}

img {vertical-align: middle;}


.mySlides {
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px; /* distance between dots */
  background-color: #bbb; /* maybe change to RS */
  display: inline-block; /* inline-block */
  position: relative; top:-70px;
  border-radius: 50%;
 
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@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}
}

JAVASCRIPT

let slideIndex = 0;
showSlides();

//Function to make automatic slideshow
function showSlides() {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let 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, 20000); // Change image every 2 seconds
}

The goal is to have a running webpage with the slideshow, so when a person adds a new image to the images folder, I do not have to add another

<div class="mySlides fade">
    <img src="images/image.xy" style="width:100%">
</div>

and another

<span class="dot"></span>

into the
<div style="text-align:center"> </div>

Any help to achieve this is highly appreciated.
Thank you!

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

彩虹直至黑白

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文