Archiv-Modus von Basti1012 Lösungspage

Slideshow Manuel oder automatisch
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>