Mehrere JavaScript Funktionen in onClick HTML Variante benutzen?
Halli hallo,
ich bin gerade dabei einen Image & Text Slider zu schreiben. Allerdings habe ich im Moment das Problem, dass ich nur die Bilder wechseln kann und die Texte nicht.
Deshalb habe ich es jetzt so geändert, dass nicht mehr nur die Bilder gewichtet, sondern die ganzen Klassen mit Bild & Text drin.
Hat jemand eine Idee warum es so nicht funktioniert und vlt. eine Lösung?
Liebe Grüße
Felix!
Der hier verwendete Code
<html>
<head>
<style>
*{
margin:0;
padding:0;
/*border:1px solid red;*/
}
body{
display:flex;
text-align:center;
flex-direction:column;
height:100vh;
}
h1{
text-align:center;
display:flex;
flex-direction:column;
padding:20px 0;
text-decoration:underline;
}
#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;
}
.textfeld{
text-align:center;
padding:3px 10px 3px 10px;
font-weight:900;
height:70px;
overflow: hidden;
}
#aus{
display:none;
}
</style>
</head>
<body>
<h1>Images Slider Eigenbau</h1>
<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=[2,3,4,5,6,7,8,9];//oder kompletter links
var komplette_link=false;// false oder true
var auto_speed=2000;
var texte=['1Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut'
,'2Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut','3jjjjLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut','4jjjjLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut','5fgsdrthLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt utLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor','6fgdgLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut','7sdfghjk','8sdfgbhn'];
var stop;
ma=document.createElement('div');
ma.id='sliderbox';
menge=images.length;
for(g=0;g<=menge-1;g++){
if(komplette_link==true){
var links_aus_array=images[g];
}else{
var links_aus_array='/image/'+images[g]+'.png';
}
ma.innerHTML+=' <figure class="slider"><img src="'+links_aus_array+'" style="width:100%"><figcaption class="textfeld"><p>'+texte[g]+'</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>