この小さなデモは、主にボックスを使用して長さと幅を修正して画像を表示します。画像をImageBoxに入れて接続します。画像を変更するたびに、ImageBoxのスタイル属性のマージン左側を変更してカルーセル効果を形成できます。
コードコピーは次のとおりです。
<！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">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> un unt ittitled document </title>
<style>
。箱 {
幅：900px;
高さ：350px;
マージン：20px;
オーバーフロー：隠し;
マージン：0 Auto;
}
.imagebox {
幅：3600px;
高さ：350px;
-webkit-transition：すべての1Sが容易になります。
-moz-transition：すべての1Sが容易になります。
-O-Transition：すべての1Sが容易になります。
遷移：すべての1Sが容易になります。
}
.imageBoxIMG {
幅：900px;
フロート：左;
高さ：350px;
}
</style>
</head>
<body>
<div>
<div id = "imagebox">
<img src = "画像/画像クリック回転/image-53.jpg"/>
<img src = "画像/画像クリック回転/image-54.jpg"/>
<img src = "画像/画像クリック回転/image-55.jpg"/>
<img src = "画像/画像クリック回転/image-56.jpg"/>
</div>
</div>
<div>
<入力型= "button" value = "left" onclick = "ターンレフト（）"/>
<入力型= "button" value = "right" onclick = "tullright（）"/>
</div>
<スクリプト言語= "javascript">
var int = setInterval（ "change（）"、3*1000）;
var a = document.getElementById（ "ImageBox"）;
var i = 1;
関数変化（）{
if（i == 4）{
i = 0;
}
i = i+1;
A.Style.MarginLeft =（1-I）*900+"PX";
}
関数spotchange（）{clearInterval（int）;}
function startchange（）{int = setInterval（ "change（）"、2*1000）;}
A.OnMouseOver = function（）{clearInterval（int）;}
a.onmouseout = function（）{int = setInterval（ "change（）"、2*1000）;}
function tonleft（）{
spotchange（）;
i = i+1;
A.Style.MarginLeft =（1-I）*900+"PX";
if（i == 4）{
i = 0;
}
startchange（）;
}
function tullright（）{
spotchange（）;
if（i> 1）{
A.Style.MarginLeft =（2-I）*900+"PX";
i = i-1;
}それ以外{
A.Style.MarginLeft = -3*900+"PX";
i = 4;
}
startchange（）;
}
</script>
</body>
</html>