Fehlerhafte Weiterblätter-Bildreihe lässt sich nicht weiterblättern

Hallo, liebe Hilfsbereiten, diese Seite https://www.wolfgang-titze.de/listing-5-31.htm wird durch einen Klick auf den Button Fotogalerie1 aufgerufen. Unten erscheint eines von 5 Bildern zum Weiterblättern nach Klick auf einen Link(Winkel). Das funktioniert aber leider nicht. Diese Website https://www.wolfgang-titze.de habe ich vor etwa 12 Jahren nach einem Buch aus der "Dummi-Reihe" erstellt. Es ist nur eine Hobby-Website. Damals hat das Weiterblättern funktioniert. Ich möchte es gern reparieren bzw. umstellen , dass das funktioniert. Ich habe schon in den Quelltext folgendes eingesetzt: (google.load, )"1" . Leider war das erfolglos.

Der hier verwendete Code

<style> body{ overflow-x:hidden; } h1{ margin:0; padding:0; font-size:22px; } #frame { width: 128px; height: 128px; border: 1px solid transparent; background: url(https://basti1012.bplaced.net/image/maedchen.png) no-repeat left top; animation: frame-animation 1s steps(7) infinite; } @keyframes frame-animation { 0% { background-position: 0px 0; } 100% { background-position: 0 -966px; } } #frame1 { width: 128px; height: 128px; border: 1px solid transparent; background: url(https://basti1012.bplaced.net/image/maedchen.png) no-repeat left top; animation: frame-animation 1s steps(7) infinite, runleft 10s infinite; } @keyframes runleft { 0% { margin-left:-200px; } 100% { margin-left:100vw; } } #frame2 { width: 128px; height: 128px; border: 1px solid transparent; background: url(https://basti1012.bplaced.net/image/maedchen.png) no-repeat left top; animation: frame-animation 1s steps(7) infinite, runleft1 10s infinite; } @keyframes runleft1 { 0% { margin-left:-200px; transform:rotateZ(0deg); } 50% { margin-left:100vw; transform:rotateZ(0deg); } 50.1%{ transform:rotateY(180deg); } 100%{ margin-left:-200px; transform:rotateY(180deg); } } </style> <body> <h1>Auf den Fleck rennen</h1> <div id="frame"></div> <h1>Durchs Bild rennen</h1> <div id="frame1"></div> <h1>Hin und her rennen</h1> <div id="frame2"></div> </body>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!