이 작은 데모는 주로 상자를 사용하여 길이와 너비를 고정하여 그림을 표시합니다. 이미지 상자에 그림을 넣고 연결하십시오. 그림을 변경할 때마다 이미지 박스 스타일 속성의 마진 왼쪽을 변경하여 회전식 효과를 형성 할 수 있습니다.
코드 사본은 다음과 같습니다.
<! 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">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> 제목의 문서 </title>
<스타일>
.상자 {
너비 : 900px;
높이 : 350px;
마진 : 20px;
오버플로 : 숨겨진;
여백 : 0 Auto;
}
.Imagebox {
너비 : 3600px;
높이 : 350px;
-webkit-transition : 모두 1 초의 편안함;
-Moz-transition : 모두 1 초의 편안함;
-o-ransition : 모두 1 초의 편안함;
전환 : 모든 1 초의 편안함;
}
.Imagebox img {
너비 : 900px;
플로트 : 왼쪽;
높이 : 350px;
}
</스타일>
</head>
<body>
<div>
<div id = "ImageBox">
<img src = "이미지/이미지 클릭 회전/이미지 -53.jpg"/>
<img src = "이미지/이미지 클릭 회전/이미지 -54.jpg"/>
<img src = "이미지/이미지 클릭 회전/이미지 -55.jpg"/>
<img src = "이미지/이미지 클릭 회전/이미지 -56.jpg"/>
</div>
</div>
<div>
<input type = "button"value = "left"onclick = "turnleft ()"/>
<입력 유형 = "버튼"value = "right"onclick = "turnright ()"/>
</div>
<script language = "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";
}
함수 stopchange () {clearinterval (int);}
함수 startChange () {int = setInterval ( "change ()", 2*1000);}
a.onmouseOver = function () {clearInterVal (int);}
a.onmouseout = function () {int = setInterval ( "Change ()", 2*1000);}
함수 Turnleft () {
stopchange ();
i = i+1;
a.style.marginleft = (1-i)*900+"px";
if (i == 4) {
i = 0;
}
startChange ();
}
function turnright () {
stopchange ();
if (i> 1) {
a.style.marginleft = (2-i)*900+"px";
i = i-1;
}또 다른{
a.style.marginleft = -3*900+"px";
i = 4;
}
startChange ();
}
</스크립트>
</body>
</html>