1. استخدم موضع عرض عرض الصورة لتشغيل الصور. التكنولوجيا :.
2. استخدم المصفوفات لوضع الصور في Carousels. التكنولوجيا: setInterval (). لا onclick ()
صورة كاروسيل 12JS.HTML
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 Strict // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml: lang = "en">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = iso-8859-1" />
<title> الصور شريحة </title>
<type type = "text/css">
* {
الهامش: 0px ؛
الحشو: 0px ؛
}
لي {
على غرار القائمة: لا شيء ؛
}
IMG {
الحدود: 0 ؛
}
أ {
تدمير النص: لا شيء ؛
}
#SLIDE {
العرض: 800 بكسل ؛
الارتفاع: 400 بكسل ؛
box-shadow: 0px 0px 5px #c1c1c1 ؛
الهامش: 20 بكسل Auto ؛
الموقف: قريب
الفائض: مخفي.
}
#SLIDE UL {
الموقف: مطلق ؛
اليسار: 0px ؛
أعلى: 0px ؛
الارتفاع: 400 بكسل ؛
العرض: 11930px ؛
}
#slide ul li {
العرض: 800 بكسل ؛
الارتفاع: 400 بكسل ؛
الفائض: مخفي.
تعويم: اليسار.
}
#SLIDE .ICO {
العرض: 800 بكسل ؛
الارتفاع: 20 بكسل ؛
الفائض: مخفي.
محاذاة النص: المركز ؛
الموقف: مطلق ؛
اليسار: 0px ؛
أسفل: 10 بكسل ؛
Z-index: 1 ؛
}
#SLIDE .ICO A {
العرض: كتلة مضمنة.
العرض: 10px ؛
الارتفاع: 10 بكسل ؛
الخلفية: url (out.png) no-repeat 0px 0px ؛
الهامش: 0px 5px ؛
}
#SLIDE .ico .active {
الخلفية: url (out1.png) no-repeat 0px 0px ؛
}
#btnleft {
العرض: 60px ؛
الارتفاع: 400 بكسل ؛
اليسار: 0px ؛
أعلى: 0px ؛
الخلفية: url () no-repeat 0px 0px ؛
الموقف: مطلق ؛
Z-index: 2 ؛
}
#btnleft: hover {
الخلفية: url () no-repeat 0px 0px ؛
}
#btnright {
العرض: 60px ؛
الارتفاع: 400 بكسل ؛
اليمين: 0px ؛
أعلى: 0px ؛
الخلفية: url () no-repeat 0px 0px ؛
الموقف: مطلق ؛
Z-index: 2 ؛
}
#btnright: hover {
الخلفية: url () no-repeat 0px 0px ؛
}
</style>
<script type = "text/javaScript">
window.onload = function () {
var oico = document.getElementById ("ICO") ؛
var abtn = oico.getElementSbyTagName ("a") ؛
var oslide = document.getElementById ("slide") ؛
var oul = oslide.getElementSbyTagname ("ul") ؛
var ali = oul [0] .getElementsByTagName ("li") ؛
var obtnleft = document.getElementById ("btnleft") ؛
var obtnright = document.getElementById ("btnright") ؛
var basewidth = ali [0] .OffSetWidth ؛
// تنبيه (basewidth) ؛
oul [0] .style.width = basewidth * ali.length + "px" ؛
var inow = 0 ؛
لـ (var i = 0 ؛ i <abtn.length ؛ i ++) {
abtn [i] .index = i ؛
abtn [i] .onclick = function () {
//alert(this.index) ؛
//alert(oul budap0.
نقل (this.index) ؛
//aico budapthis.index.
}
}
Obtnleft.onclick = function () {
inow ++ ؛
//document.title = inow ؛
تحرك (غير) ؛
}
obtnright.onclick = function () {
inow -؛
document.title = inow ؛
تحرك (غير) ؛
}
var curindex = 0 ؛
var timeInterval = 1000 ؛
setInterval (التغيير ، timeInterval) ؛
تغيير الوظيفة () {
if (curindex == abtn.length) {
curindex = 0 ؛
} آخر {
نقل (curindex) ؛
curindex += 1 ؛
}
}
وظيفة نقل (فهرس) {
//document.title = index ؛
if (index> ali.length-1) {
الفهرس = 0 ؛
inow = فهرس ؛
}
إذا (الفهرس <0) {
الفهرس = ali.length - 1 ؛
inow = فهرس ؛
}
لـ (var n = 0 ؛ n <abtn.length ؛ n ++) {
abtn [n] .className = "" ؛
}
abtn [index] .className = "Active" ؛
oul [0] .style.left = -index * basewidth + "px" ؛
// buffer (oul [0] ، {
// اليسار: -index * basewidth
//} ، 8)
}
}
</script>
</head>
<body>
<div id = "slide">
<a id = "btnleft" href = "javaScript: void (0) ؛" > </a>
<a id = "btnright" href = "javaScript: void (0) ؛" > </a>
<!-عند تغيير الصورة التالية: style = "Left:-(N-1)*800px ؛"->
<ul>
<li> <img src = "1.jpg" /> </li>
<li> <img src = "2.jpg" /> </li>
<li> <img src = "3.jpg" /> </li>
<li> <img src = "4.jpg" /> </li>
<li> <img src = "5.jpg" /> </li>
<li> <img src = "6.jpg" /> </li>
</ul>
<div id = "ICO">
<a href = "javaScript: void (0) ؛"> </a>
<a href = "javaScript: void (0) ؛"> </a>
<a href = "javaScript: void (0) ؛"> </a>
<a href = "javaScript: void (0) ؛"> </a>
<a href = "javaScript: void (0) ؛"> </a>
<a href = "javaScript: void (0) ؛"> </a>
</div>
</div>
</body>
</html>
الصور تلقائيا تشغيل. html
نسخة الكود كما يلي:
<! 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> الصور </title>
<script type = "text/javaScript">
var curindex = 0 ؛
var timeInterval = 1000 ؛
var arr = new array () ؛
arr [0] = "1.jpg" ؛
arr [1] = "2.JPG" ؛
arr [2] = "3.JPG" ؛
arr [3] = "4.jpg" ؛
arr [4] = "5.jpg" ؛
arr [5] = "6.jpg" ؛
arr [6] = "7.jpg" ؛
setInterval (changeimg ، timeInterval) ؛
وظيفة changeimg () {
var obj = document.getElementById ("OBJ") ؛
if (curindex == arr.length-1) {
curindex = 0 ؛
} آخر {
curindex += 1 ؛
}
obj.src = arr [curindex] ؛
}
</script>
<!- <script language = "javaScript">
setInterval (اختبار ، 1000) ؛
var array = new array () ؛
فارس فهرس = 0 ؛
var array = new array ("Image/1.jpg" ، "Image/2.jpg" ، "Image/3.jpg" ، "Image/4.jpg" ، "Image/5.jpg" ، "Image/6.jpg" ، "Image/7.jpg" ، "Image/8.jpg" ، "Image/9.jpg" ، "Image/10.jpg) ؛
اختبار الوظيفة () {
var myimg = document.getElementById ("imgs") ؛
if (index == array.length-1)
{index = 0 ؛ } آخر {index ++ ؛ }
myimg.src = صفيف [فهرس] ؛
}
</script> ->
</head>
<body>
<img id = "obj" src = "1.jpg" border = 0 />
</body>
</html>