การสาธิตขนาดเล็กนี้ส่วนใหญ่ใช้กล่องเพื่อแก้ไขความยาวและความกว้างเพื่อแสดงภาพ ใส่รูปภาพลงใน 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" />
<tite> เอกสารชื่อ UNT </title>
<style>
.กล่อง {
ความกว้าง: 900px;
ความสูง: 350px;
มาร์จิ้น: 20px;
ล้น: ซ่อน;
มาร์จิ้น: 0 อัตโนมัติ;
-
.ImageBox {
ความกว้าง: 3600px;
ความสูง: 350px;
-Webkit-Transition: ความสะดวกสบายทั้งหมด 1S;
-MOZ-TRANSITION: ความสะดวกสบายทั้งหมด 1S;
-O-Transition: ความสะดวกสบายทั้งหมด 1S;
การเปลี่ยนแปลง: ความสะดวกสบาย 1S ทั้งหมด;
-
.ImageBox img {
ความกว้าง: 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>
<อินพุต type = "button" value = "left" onclick = "turnleft ()"/>>
<อินพุต type = "button" value = "ขวา" onclick = "turnright ()"/>
</div>
<ภาษาสคริปต์ = "JavaScript">
var int = setInterval ("เปลี่ยน ()", 3*1000);
var a = document.getElementById ("ImageBox");
var i = 1;
ฟังก์ชั่นเปลี่ยน () {
ถ้า (i == 4) {
i = 0;
-
i = i+1;
A.STYLE.MARGINLEFT = (1-I)*900+"PX";
-
ฟังก์ชั่น stopchange () {clearinterval (int);}
ฟังก์ชัน StartChange () {int = setInterval ("เปลี่ยน ()", 2*1000);}
A.onMouseOver = function () {clearInterval (int);}
A.OnMouseOut = function () {int = setInterval ("เปลี่ยน ()", 2*1000);}
ฟังก์ชัน Turnleft () {
stopchange ();
i = i+1;
A.STYLE.MARGINLEFT = (1-I)*900+"PX";
ถ้า (i == 4) {
i = 0;
-
StartChange ();
-
ฟังก์ชั่น turnright () {
stopchange ();
ถ้า (i> 1) {
A.STYLE.MARGINLEFT = (2-I)*900+"PX";
i = i-1;
}อื่น{
A.STYLE.MARGINLEFT = -3*900+"PX";
i = 4;
-
StartChange ();
-
</script>
</body>
</html>