Artikel ini menjelaskan efek bergiliran bermain tayangan slide di JS. Bagikan untuk referensi Anda, sebagai berikut:
<Body> <script language = "JavaScript" type = "Text/JavaScript"> <!-/************************************************ Nama: Gambar Kelas Carousel Class Time: 2010-07-11 Zhangty Contoh: Ada sebuah node bernama iMgPlayer (atau ID lainnya. Pimgplayer.additem ("tes", "http://www.pomoho.com", "http://static.pomoho.com/static/samesong/images/logo5.jpg"); Pimgplayer.additem ("test2", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/samesong/images/logo4.jpg"); Pimgplayer.additem ("test3", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/samesong/images/logo3.jpg"); Pimgplayer.init ("imgplayer", 200, 230); Catatan: Cocok untuk tempat -tempat di mana hanya ada satu carousel gambar di halaman. *************************************************/var pimgplayer = {_timer: null, _items: [], _container: null, _index: _Img: _4000: _Container: null, _index: _Img: _Img: _container: null, _index: _Img: _Img: _container: null, _index: _Img: _Img: _container: null, _index: _Img: _Img: _container: null, _index: _Img: _IMGS: [] [] fungsi (objid, w, h, waktu) {this.intervaltime = waktu || ini.intervaltime; this._container = document.getElementById (objid); this._container.style.display = "block"; this._container.style.width = w + "px"; this._container.style.height = h + "px"; this._container.style.position = "relatif"; this._container.style.overflow = "tersembunyi"; //this._container.style.border = "1px solid #fff"; var linkstyle = "Display: block; Text-Decoration: none;"; if (document.all) {linkstyle += "filter:"; linkstyle += "progid: dximagetransform.microsoft.barn (durasi = 0,5, gerak = 'out', orientasi = 'vertikal')"; linkstyle += "progid: dximagetransform.microsoft.barn (durasi = 0,5, gerak = 'out', orientasi = 'horizontal')"; linkstyle += "progid: dximagetransform.microsoft.blinds (durasi = 0,5, pita = 10, arah = 'bawah')"; linkstyle += "progid: dximagetransform.microsoft.checkerboard ()"; LinkStyle += "Progid: dximagetransform.microsoft.fade (durasi = 0,5, tumpang tindih = 0)"; linkstyle += "progid: dximagetransform.microsoft.gradientwipe (durasi = 1, gradien = 1.0, motion = 'reverse')"; linkstyle += "progid: dximagetransform.microsoft.inset ()"; linkstyle += "progid: dximagetransform.microsoft.iris (durasi = 1, irisstyle = plus, motion = out)"; linkstyle += "progid: dximagetransform.microsoft.iris (durasi = 1, irisstyle = plus, motion = in)"; linkstyle += "progid: dximagetransform.microsoft.iris (durasi = 1, irisstyle = berlian, gerak = in)"; linkstyle += "progid: dximagetransform.microsoft.iris (durasi = 1, irisstyle = berlian, gerak = in)"; linkstyle += "progid: dximagetransform.microsoft.iris (durasi = 1, irisstyle = square, motion = in in)"; linkstyle += "progid: dximagetransform.microsoft.iris (durasi = 0,5, irisstyle = star, motion = in)"; LinkStyle += "Progid: dximagetransform.microsoft.radialwipe (durasi = 0,5, wipestyle = clock)"; LinkStyle += "progid: dximagetransform.microsoft.radialwipe (durasi = 0,5, wipestyle = wedge)"; LinkStyle += "progid: dximagetransform.microsoft.radialwipe (durasi = 0,5, wipestyle = wedge)"; LinkStyle += "Progid: dximagetransform.microsoft.randombars (durasi = 0,5, orientasi = horizontal)"; LinkStyle += "Progid: dximagetransform.microsoft.randombars (durasi = 0,5, orientasi = vertikal)"; linkstyle += "progid: dximagetransform.microsoft.randomdissolve ()"; LinkStyle += "Progid: dximagetransform.microsoft.spiral (durasi = 0,5, gridsizex = 16, gridsizey = 16)"; LinkStyle += "Progid: dximagetransform.microsoft.stretch (durasi = 0,5, stretchstyle = push)"; LinkStyle += "Progid: dximagetransform.microsoft.strips (durasi = 0,5, gerak = kanan)"; LinkStyle += "Progid: dximagetransform.microsoft.wheel (durasi = 0,5, spoke = 8)"; LinkStyle += "Progid: dximagetransform.microsoft.zigzag (durasi = 0,5, gridsizex = 4, gridsizey = 40); lebar: 100%; tinggi: 100%"; } // var ulstyle = "margin: 0; lebar:"+w+"px; posisi: absolute; z-index: 999; kanan: 5px; filter: alpha (opacity = 30, finishopacity = 90, style = 1); overflow: hidden; bawah: -1px; tinggi: 16px; border-right: 1px: 1px: 1px; Tinggi; 16px; 1px: 1px: 1px: 1px: 1px; // var listyle = "margin: 0; daftar-gaya-tipe: tidak ada; margin: 0; padding: 0; float: right;"; // var basespacstyle = "CLEAR: keduanya; tampilan: blok; lebar: 23px; garis-line-height: 18px; font-size: 12px; font-family: '安'; opacity: 0.6;"; BASESPACSTYLE += "BORDER: 1PX SOLID #FFF; BORDER-RIGHT: 0; Border-Bottom: 0;"; BASESPACSTYLE += "Warna: #FFF; Teks-Align: Center; Kursor: Pointer;"; // var ulhtml = ""; untuk (var i = this._items.length -1; i> = 0; i-) {var vintyle = ""; if (i == this._index) {vSTYLE = BASESPACSTYLE + "BATACAY:#ff0000;"; // inisialisasi warna bilangan bagian bawah} else {stystyle = baseSpacstyle + "latar belakang:#c0c0c0;"; // inisialisasi warna latar belakang angka bawah} ulhtml+= "<li style =/" "+listyle+"/">"; ulhtml+= "<span onmouseover =/" pimgplayer.mouseover (this);/"onmouseout =/" pimgplayer.mouseout (this);/"style =/"+stystyle+"/" onClick =/"pimgplayer.play ("+i+"); return false;/" herf =/"pimgplayer.play ("+i+"); return false;/" herf =/"pimgplayer.play ("+i+"); return false;/" herf =/"JRIP:" JAUP: ""+I+");" Herf = "" this._items [i] .title+"/"> "+(i+1)+" </span> "; ulhtml+=" </li> ";} // var html =" <a href =/""+this._items [this._index] .link+"/" title = "+this._items [this._index] .link+"/"title ="+this. "this._items [this. target =/"_ blank/" style =/"+linkstyle+"/"> </a> <ul style =/"+ulstyle+"/"> "+ulhtml+" </ul> "; this._container.innerHtml = html; var link = this._container.getElementsByTagname ("a") [0]; link.style.width = w + "px"; link.style.height = h + "px"; link.style.background = 'url (' + this._items [0] .img + ') No-Repeat Center Center'; // this._timer = setInterval ("pimgplayer.play ()", this.intervaltime); }, addItem: function (_title, _link, _imgurl) {this._items.push ({title: _title, tautan: _link, img: _imgurl}); var img = gambar baru (); img.src = _imgurl; this._imgs.push (img); }, play: function (index) {if (index! = null) {this._index = index; clearInterval (this._timer); this._timer = setInterval ("pimgplayer.play ()", this.intervaltime); } else {this._index = this._index <this._items.length-1? this._index+1: 0; } var link = this._container.geteLementsByTagname ("a") [0]; if (link.filters) {var ren = math.floor (math.random ()*(link.filters.length)); link.filters [ren] .Apply (); link.filters [ren] .play (); } link.href = this._items [this._index] .link; link.title = this._items [this._index] .title; link.style.background = 'url (' + this._items [this._index] .img + ') no-repeat center'; // var listyle = "margin: 0; daftar-gaya-tipe: tidak ada; margin: 0; padding: 0; float: right;"; var basespacstyle = "Clear: keduanya; tampilan: blok; lebar: 23px; garis-tinggi: 18px; font-ukuran: 12px; font-family: '安'; opacity: 0,6;"; BASESPACSTYLE += "BORDER: 1PX SOLID #FFF; BORDER-RIGHT: 0; Border-Bottom: 0;"; BASESPACSTYLE += "Warna: #FFF; Teks-Align: Center; Kursor: Pointer;"; var ulhtml = ""; untuk (var i = this._items.length -1; i> = 0; i-) {var vintyle = ""; if (i == this._index) {vSTYLE = BASESPACSTYLE + "BATACAY:#ff0000;"; // Warna angka} else {vintyle = baseSpacstyle + "latar belakang:#c0c0c0;"; // Warna latar belakang angka} ulhtml+= "<li style =/" "+listyle+"/">"; ulhtml+= "<span onmouseover =/" pimgplayer.mouseover (this);/"onmouseout =/" pimgplayer.mouseout (this);/"style =/"+stystyle+"/" onClick =/"pimgplayer.play ("+i+"); return false;/" herf =/"pimgplayer.play ("+i+"); return false;/" herf =/"pimgplayer.play ("+i+"); return false;/" herf =/"JRIP:" JAUP: ""+I+");" Herf = "" this._items [i] .title + "/"> " + (i + 1) +" </span> "; ulhtml + =" </li> ";} this._container.getElementsbyTagname (" ul ") [0] .innerHtml = ulhtml; if (this._index! = i-1) {obj.style.color = "#ff0000"; "http://www.lashou.com/", "./images/1001.jpg"); "http://www.meituan.com/", "./images/1003.jpg");Untuk informasi lebih lanjut tentang konten terkait JavaScript, silakan periksa topik -topik situs ini: "Ringkasan Efek dan Teknik Peralihan Javascript", "Ringkasan Keterampilan Algoritma Pencarian JavaScript", "Ringkasan Teknik Animasi dan Teknik JavaScript," Ringkasan Data JavaScript dan Ringkasan Data JavaScript "," Ringkasan Data Javascript ", Ringkasan Data JavaScript," Ringkasan Data JavaScript ", Ringkasan Data JavaScript" Algoritma dan teknik traversal javascript ", dan" Ringkasan Penggunaan Operasi Matematika JavaScript "
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.