Diese kleine Demo verwendet hauptsächlich die Box, um die Länge und die Breite zu beheben, um das Bild anzuzeigen. Legen Sie das Bild in die ImageBox und verbinden Sie es. Jedes Mal, wenn Sie das Bild ändern, kann der Rand-Links des Style-Attributs der ImageBox geändert werden, um einen Karussffeffekt zu bilden.
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> bis zum Titel "Dokument" </title>
<Styles>
.Kasten {
Breite: 900px;
Höhe: 350px;
Rand: 20px;
Überlauf: versteckt;
Rand: 0 Auto;
}
.imagebox {
Breite: 3600px;
Höhe: 350px;
-Webkit-Übergang: Alle 1S-Leichtigkeiten;
-Moz-Übergang: Alle 1s-Leichtigkeiten;
-O-Übergang: Alle 1S-Leichtigkeiten;
Übergang: Alle 1S-Leichtigkeiten;
}
.imagebox img {
Breite: 900px;
float: links;
Höhe: 350px;
}
</style>
</head>
<body>
<div>
<div id = "ImageBox">
<img src = "Bilder/Bild klicken Sie auf Rotation/Image-53.jpg"/>
<img src = "Bilder/Bild klicken Sie auf Rotation/Image-54.jpg"/>
<img src = "Bilder/Bild klicken Sie auf Rotation/Image-55.jpg"/>
<img src = "Bilder/Bild klicken Sie auf Rotation/Image-56.jpg"/>
</div>
</div>
<div>
<Eingabe type = "button" value = "links" onclick = "Turnleft ()"/>
<input type = "button" value = "rechts" onclick = "beltright ()"/>
</div>
<script Language = "JavaScript">
var int = setInterval ("change ()", 3*1000);
var a = document.getElementById ("ImageBox");
var i = 1;
function change () {
if (i == 4) {
i = 0;
}
i = i+1;
A.Style.Marginleft = (1-i)*900+"px";
}
Funktion stopchange () {ClearInterval (int);}
Funktion startChange () {int = setInterval ("change ()", 2*1000);}
a.onmouseover = function () {ClearInterval (int);};
a.onmouseout = function () {int = setInterval ("change ()", 2*1000);};
Funktion Turnleft () {
stopchange ();
i = i+1;
A.Style.Marginleft = (1-i)*900+"px";
if (i == 4) {
i = 0;
}
startChange ();
}
Funktion beltright () {
stopchange ();
if (i> 1) {
A.Style.Marginleft = (2-i)*900+"px";
i = i-1;
}anders{
A.Style.Marginleft = -3*900+"px";
i = 4;
}
startChange ();
}
</script>
</body>
</html>