Slideshow
Slideshow Manuel oder automatisch
Der hier verwendete Code
<!doctype html>
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
body{
display:flex;
text-align:center;
flex-direction:column;
height:100vh;
}
#sliderbox{
display:flex;
width:80vw;
flex:10;
margin:0px auto;
}
figure{
border:3px solid black;
border-radius:20px;
}
#buttonbox{
width:80vw;
margin:0px auto;
display:flex;
flex:1;
}
#buttonbox > *{
flex:1;
height:30px;
}
.slider{
width:100%;
overflow:hidden;
flex-direction:column;
}
#aus{
display:none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<main>
</main>
<div id="buttonbox">
<input type="button" id="minus" value="minus">
<input type="button" id="auto" value="automatik">
<input type="button" id="aus" value="Stop">
<input type="button" id="plus" value="plus">
</div>
<script>
var images=['https://basti1012.bplaced.net/image/1.png','https://basti1012.bplaced.net/image/2.png','https://basti1012.bplaced.net/image/3.png'];
var auto_speed=2000;
var stop;
ma=document.createElement('div');
ma.id='sliderbox';
menge=images.length;
for(g=0;g<=menge-1;g++){
var effekt='100%';
if(g==1){
var effekt='200%';
}
ma.innerHTML+=' <figure class="slider"><img src="'+images[g]+'" style="width:'+effekt+'"><figcaption class="textfeld"><p></p></figcaption> </figure>';
document.getElementsByTagName('main')[0].appendChild(ma);
}
var slideIndex = 1;
showDivs(slideIndex);
function showDivs(n) {
var i;
var x = document.getElementsByClassName("slider");
if (n > menge) {
slideIndex = 1
}
if (n < 1) {
slideIndex = menge;
}
for (i = 0; i < x.length; i++) {
x[i].style.transition='all 1s ease-in-out';
x[i].style.opacity = 0;
x[i].style.display = 'none';
}
x[slideIndex-1].style.transition='all 1s ease-in-out';
x[slideIndex-1].style.display = 'flex';
x[slideIndex-1].style.opacity = 1;
}
document.getElementById('plus').addEventListener('click',function(){
slideIndex++;
showDivs(slideIndex)
})
document.getElementById('minus').addEventListener('click',function(){
slideIndex--;
showDivs(slideIndex)
})
function automatic(){
stop=setInterval(function(){
slideIndex++;
showDivs(slideIndex)
},auto_speed)
}
var stop_auto=document.getElementById('aus');
var aut=document.getElementById('auto');
aut.addEventListener('click',function(){
aut.style.display='none';
stop_auto.style.display='block';
slideIndex++;
showDivs(slideIndex)
automatic();
})
stop_auto.addEventListener('click',function(){
aut.style.display='block';
stop_auto.style.display='none';
clearInterval(stop);
});
</script>
</body>
</html>