Tweet
Hallo zusammen,
ich versuche zur Zeit, eine einfache Diashow zu erstellen. Im Internet fand ich einen ähnlichen script, den ich für meine Bedürfnisse wie folgt umschrieb:
Der script tat genau das was ich benötigte. Nun möchte ich aber, dass die Bildnamen aus einem array gelesen werden. Das funktioniert aber nicht. Könnt ihr mir helfen?
Sorry, bin wirklich Anfänger
Vielen Dank im voraus für Eure Hilfe
ich versuche zur Zeit, eine einfache Diashow zu erstellen. Im Internet fand ich einen ähnlichen script, den ich für meine Bedürfnisse wie folgt umschrieb:
Code:
<!DOCTYPE html>
<html>
<body>
<style>
.slideshow-container
{
max-width: 300px;
margin: auto;
}
</style>
<div class="slideshow-container">
<div class="mySlides">
<img src="bild1.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="bild2.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="bild3.jpg" style="width:100%">
</div>
</div>
<br>
<script>
let slideIndex = 0;
showSlides(0);
function showSlides(a)
{
let i;
let slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++)
{
slides[i].style.display = "none";
}
if (a==0)
{
slideIndex++;
}
if (a==1)
{
slideIndex--;
}
if (slideIndex > slides.length)
{
slideIndex = slides.length
}
if (slideIndex < 1)
{
slideIndex = 1
}
slides[slideIndex-1].style.display = "block";
}
</script>
<div style="display:flex;justify-content: space-between; width:100px;"><div onclick="showSlides(1)">zurück</div><div onclick="showSlides(0)">vor</div></div>
</body>
</html>
Der script tat genau das was ich benötigte. Nun möchte ich aber, dass die Bildnamen aus einem array gelesen werden. Das funktioniert aber nicht. Könnt ihr mir helfen?
Code:
<!DOCTYPE html>
<html>
<body>
<style>
.slideshow-container
{
max-width: 300px;
margin: auto;
}
</style>
<div id="image-container"></div>
<script>
let slideIndex = 0;
showSlides(0);
function showSlides(a)
{
let i;
let slides = ["bild1.jpg","bild2.jpg","bild3.jpg"];
container = document.getElementById('image-container');
for (i = 0; i < slides.length; i++)
{
img = document.createElement('img');
img.src = slides[i];
container.appendChild(img);
}
if (a==0)
{
slideIndex++;
}
if (a==1)
{
slideIndex--;
}
if (slideIndex > slides.length)
{
slideIndex = slides.length
}
if (slideIndex < 1)
{
slideIndex = 1
}
slides[slideIndex-1].style.display = "block";
}
</script>
<div style="display:flex;justify-content: space-between; width:100px;"><div onclick="showSlides(1)">zurück</div><div onclick="showSlides(0)">vor</div></div>
</body>
</html>
Sorry, bin wirklich Anfänger
Vielen Dank im voraus für Eure Hilfe