Cette petite démo utilise principalement la boîte pour fixer la longueur et la largeur pour afficher l'image. Mettez l'image dans la boîte d'image et connectez-la. Chaque fois que vous modifiez l'image, la marge-gauche de l'attribut de style de l'image de l'image peut être modifiée pour former un effet de carrousel.
La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> UNT intitulé Document </Title>
<style>
.boîte {
Largeur: 900px;
hauteur: 350px;
marge: 20px;
débordement: caché;
marge: 0 auto;
}
.imagebox {
Largeur: 3600px;
hauteur: 350px;
-Webkit-Transition: Tous les 1s facilités;
-Moz-Transition: Tous les 1 Facitant de sortie;
-O-Transition: Tous les 1s facilités;
Transition: Tous les 1s facilités;
}
.imagebox img {
Largeur: 900px;
flottant: à gauche;
hauteur: 350px;
}
</ style>
</ head>
<body>
<div>
<div id = "imagebox">
<img src = "images / image cliquer rotation / image-53.jpg" />
<img src = "images / image cliquer rotation / image-54.jpg" />
<img src = "images / image cliquer rotation / image-55.jpg" />
<img src = "images / image cliquer rotation / image-56.jpg" />
</div>
</div>
<div>
<input type = "bouton" value = "Left" onClick = "Turnleft ()" />
<input type = "bouton" value = "droit" onclick = "Turnright ()" />
</div>
<script linguisse = "javascript">
var int = setInterval ("change ()", 3 * 1000);
var a = document.getElementById ("imagebox");
var i = 1;
Fonction Change () {
if (i == 4) {
i = 0;
}
i = i + 1;
a.style.marginleft = (1-i) * 900 + "px";
}
fonction stopchange () {ClearInterval (int);}
fonction startchange () {int = setInterval ("change ()", 2 * 1000);}
a.onMouseOver = function () {ClearInterval (int);}
a.onmouseout = function () {int = setInterval ("change ()", 2 * 1000);}
fonction TurnLeft () {
stopchange ();
i = i + 1;
a.style.marginleft = (1-i) * 900 + "px";
if (i == 4) {
i = 0;
}
startchange ();
}
fonction turtright () {
stopchange ();
if (i> 1) {
a.style.marginleft = (2-i) * 900 + "px";
i = i-1;
}autre{
a.style.marginleft = -3 * 900 + "px";
i = 4;
}
startchange ();
}
</cript>
</docy>
</html>