vollständig
gekürzt
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" > <meta name="viewport" content="width=device-width, initial-scale=1.0" > <meta name="author" content="Thomas Maier" > <meta name="website" content="https://www.css4.at" > <meta name="date" content="2023-10-28" > <title>Horizontale Bildlaufleiste</title> <style> #HauptDiv { width: 100%; border: blue 1px solid; overflow: hidden; display: -webkit-inline-box; } .InnenDiv { display: inline-block; border: red 1px solid; transition: width 2s; overflow: hidden; float: left; box-sizing: border-box; } </style> </head> <body> <h1>Div Bildlaufleisteaufband</h1> <div id="HauptDiv"> <div class="InnenDiv">1</div> <div class="InnenDiv">2</div> <div class="InnenDiv">3</div> <div class="InnenDiv">4</div> <div class="InnenDiv">5</div> <div class="InnenDiv">6</div> <div class="InnenDiv">7</div> <div class="InnenDiv">8</div> <div class="InnenDiv">9</div> <div class="InnenDiv">10</div> </div> <div id="Navigation"> <button onclick="zurueck();" id="ButtonZurueck">Zurück</button> <button onclick="weiter();" id="ButtonWeiter">Weiter</button> </div> <script> var divHoch = 200; var divBreit = 400; document.getElementById("HauptDiv").style.height = divHoch + "px"; var hauptDivBreit = document.getElementById("HauptDiv").scrollWidth; var wiederhole = parseInt(hauptDivBreit / divBreit); var nr = 0; var meineDivs = document.querySelectorAll(".InnenDiv"); for (var i = 0; i < meineDivs.length; i++) { meineDivs[i].setAttribute("data-nr", i + 1); meineDivs[i].style.height = divHoch + "px"; meineDivs[i].style.width = divBreit + "px"; } function weiter(){ for (var x = 0; x < wiederhole; x++) { nr = nr + 1; var dasDiv = '[data-nr="' + nr + '"]'; document.querySelector(dasDiv).style.width = "0px"; checkNavi(); if(nr == meineDivs.length) {break;} } } function zurueck(){ for (var x = 0; x < wiederhole; x++) { if(nr == 0) {break;} var dasDiv = '[data-nr="' + nr + '"]'; document.querySelector(dasDiv).style.width = divBreit + "px"; nr = nr - 1; checkNavi(); } } function checkNavi() { if(nr == 0) { document.getElementById("ButtonZurueck").style.visibility = "hidden"; document.getElementById("ButtonWeiter").style.visibility = "visible"; } if(nr > 0 && nr < meineDivs.length) { document.getElementById("ButtonZurueck").style.visibility = "visible"; document.getElementById("ButtonWeiter").style.visibility = "visible"; } if(nr == meineDivs.length) { document.getElementById("ButtonWeiter").style.visibility = "hidden"; } } </script> </body> </html>
