يستخدم هذا العرض التوضيحي الصغير المربع بشكل أساسي لإصلاح الطول والعرض لعرض الصورة. ضع الصورة في صندوق الصور وقم بتوصيلها. في كل مرة تقوم فيها بتغيير الصورة ، يمكن تغيير الهامش اليسرى من سمة نمط PhotoBox لتشكيل تأثير دائري.
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> Unted Document </title>
<style>
.صندوق {
العرض: 900 بكسل ؛
الارتفاع: 350 بكسل ؛
الهامش: 20 بكسل ؛
الفائض: مخفي.
الهامش: 0 Auto ؛
}
.MAGEBOX {
العرض: 3600px ؛
الارتفاع: 350 بكسل ؛
-الويبكيت الانتقال: كل 1s سهولة في الخارج ؛
-الموز انتقال: كل 1S سهلة ؛
-الران: كل 1S سهلة ؛
الانتقال: جميع 1s سهولة في الخارج ؛
}
.MAGEBOX IMG {
العرض: 900 بكسل ؛
تعويم: اليسار.
الارتفاع: 350 بكسل ؛
}
</style>
</head>
<body>
<viv>
<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>
<viv>
<type type = "button" value = "Left" onClick = "turnleft ()"/>
<type type = "button" value = "right" onClick = "DountRight ()"/>
</div>
<script language = "javaScript">
var int = setInterval ("change ()" ، 3*1000) ؛
var a = document.getElementById ("pictionbox") ؛
var i = 1 ؛
تغيير الوظيفة () {
إذا (i == 4) {
أنا = 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) ؛}
دالة الدوار () {
stopChange () ؛
i = i+1 ؛
A.Style.MarginLeft = (1-I)*900+"PX" ؛
إذا (i == 4) {
أنا = 0 ؛
}
StartChange () ؛
}
الوظيفة الدورية () {
stopChange () ؛
إذا (i> 1) {
A.Style.MarginLeft = (2-I)*900+"PX" ؛
أنا = I-1 ؛
}آخر{
A.Style.MarginLeft = -3*900+"PX" ؛
أنا = 4 ؛
}
StartChange () ؛
}
</script>
</body>
</html>