Hallo, liebe Hilfsbereiten,
diese Seite<a href=" https://www.wolfgang-titze.de/listing-5-31.htm"> https://www.wolfgang-titze.de/listing-5-31.htm</a> 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.
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(/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(/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(/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>