1. Gunakan posisi tampilan lebar gambar untuk memutar gambar. Teknologi: .OffsetWidth, abtn [i] .index = i, setInterval (), oul [0] .style.left =, onclick ()
2. Gunakan array untuk menempatkan gambar ke dalam korsel. Teknologi: setInterval (). Tidak ada onsklick ()
Gambar korsel 12js.html
Salinan kode adalah sebagai berikut:
<! 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 = "tipe konten" konten = "text /html; charset = iso-8859-1" />
<Title> Gambar Slide </iteme>
<type style = "text/css">
* {
margin: 0px;
padding: 0px;
}
Li {
List-style: tidak ada;
}
img {
Perbatasan: 0;
}
A {
Dekorasi Teks: Tidak Ada;
}
#menggeser {
Lebar: 800px;
Tinggi: 400px;
Kotak-Shadow: 0px 0px 5px #c1c1c1;
Margin: 20px Auto;
Posisi: kerabat;
meluap: tersembunyi;
}
#slide ul {
Posisi: Absolute;
Kiri: 0px;
Atas: 0px;
Tinggi: 400px;
Lebar: 11930px;
}
#slide ul li {
Lebar: 800px;
Tinggi: 400px;
meluap: tersembunyi;
float: kiri;
}
#slide .ico {
Lebar: 800px;
Tinggi: 20px;
meluap: tersembunyi;
Teks-Align: tengah;
Posisi: Absolute;
Kiri: 0px;
Bawah: 10px;
z-index: 1;
}
#slide .ico a {
Tampilan: blok inline;
Lebar: 10px;
Tinggi: 10px;
latar belakang: url (out.png) no-repeat 0px 0px;
margin: 0px 5px;
}
#slide .ico .active {
Latar belakang: url (out1.png) no-repeat 0px 0px;
}
#btnleft {
Lebar: 60px;
Tinggi: 400px;
Kiri: 0px;
Atas: 0px;
Latar belakang: url () no-repeat 0px 0px;
Posisi: Absolute;
z-index: 2;
}
#btnleft: hover {
Latar belakang: url () no-repeat 0px 0px;
}
#btnright {
Lebar: 60px;
Tinggi: 400px;
Kanan: 0px;
Atas: 0px;
Latar belakang: url () no-repeat 0px 0px;
Posisi: Absolute;
z-index: 2;
}
#btnright: hover {
Latar belakang: url () no-repeat 0px 0px;
}
</tyle>
<type skrip = "Teks/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;
// peringatan (basewidth);
oul [0] .style.width = basewidth * ali.length + "px";
var inow = 0;
untuk (var i = 0; i <abtn.length; i ++) {
abtn [i] .index = i;
abtn [i] .onClick = function () {
//alert(this.index);
//alert(oulht0ace.style.left);
pindahkan (this.index);
//aicoöthis.indexace.classname = "Active";
}
}
obtNleft.onClick = function () {
Inow ++;
//document.title = inow;
pindahkan (inow);
}
ObtNRight.OnClick = function () {
Inow -;
document.title = inow;
pindahkan (inow);
}
var curIndex = 0;
var TimeInterval = 1000;
setInterval (Ubah, TimeInterval);
function change () {
if (curIndex == abtn.length) {
CurIndex = 0;
} kalau tidak {
pindahkan (CurIndex);
CurIndex += 1;
}
}
function move (index) {
//document.title = index;
if (index> ali.length-1) {
indeks = 0;
inow = index;
}
if (index <0) {
index = ali.length - 1;
inow = index;
}
untuk (var n = 0; n <abtn.length; n ++) {
abtn [n] .className = "";
}
abtn [index] .className = "aktif";
oul [0] .style.left = -index * basewidth + "px";
// buffer (oul [0], {
// Kiri: -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>
<!-Saat mengubah gambar berikutnya: 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>
Gambar secara otomatis Play.html
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<Title> gambar </iteme>
<type skrip = "Teks/JavaScript">
var curIndex = 0;
var TimeInterval = 1000;
var arr = array baru ();
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);
function changeimg () {
var obj = document.geteLementById ("obj");
if (curIndex == arr.length-1) {
CurIndex = 0;
} kalau tidak {
CurIndex += 1;
}
obj.src = arr [CurIndex];
}
</script>
<!- <bahasa skrip = "javascript">
setInterval (tes, 1000);
var array = array baru ();
indeks var = 0;
var array = array baru ("gambar/1.jpg", "gambar/2.jpg", "gambar/3.jpg", "gambar/4.jpg", "gambar/5.jpg", "gambar/6.jpg", "gambar/7.jpg", "gambar/8.jpg", "Image/9.jpg", "Image/10.jpg (JPG");
function test () {
var myimg = document.geteLementById ("imgs");
if (index == array.length-1)
{index = 0; } else {index ++; }
myimg.src = array [indeks];
}
</script> ->
</head>
<body>
<img id = "obj" src = "1.jpg" border = 0 />
</body>
</html>