Setiap orang akrab dengan situs web HAO123. Saya tidak perlu mengatakan lebih banyak tentang efek spesifik. Teman yang tertarik dapat merujuk pada rendering. Editor berikut akan berbagi dengan Anda gagasan untuk mengimplementasikan kode. Tentu saja, Anda dapat menambahkan, memodifikasi, dan menghapus kode sesuai dengan kebutuhan Anda dengan tepat.
Kode kuncinya adalah sebagai berikut:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Picture carousel</title><style>.warp{width: 600px;height: 750px;position: relative;margin:30px auto 0;overflow: hidden;}#box{width: 600px;height: 750px;position: absolute; atas: 0px; kiri: 0px; overflow: tersembunyi;/*overflow-x: auto;*/}#box #con {lebar: 6000px; tinggi: 750px; overflow: tersembunyi;}#con img {float: width: 600px; tinggi: 750px; 366px;width: 36px;height: 36px;background: url(images/btnL.png) 0 0 no-repeat;cursor: pointer;}#btnR{position: absolute;right: 0px;top: 366px;width: 36px;height: 36px;background: url(images/btnR.png) 0 0 no-repeat;cursor: pointer;}#num {position: absolute; bawah: 10px; kiri: 148px; overflow: tersembunyi; gaya-gaya: tidak ada;}#num li {float: kiri; margin: 0 5px; font-ukuran: 16px; line-height: 25px; tinggi: 25px; lebar: 25px; latar belakang; Li.Select {latar belakang-color: green; color: white;} </tyle> </head> <body> <verv> <div id = "box"> <div id = "con"> <img src = "gambar/meinv1.jpg"> <img src = "gambar/meinv2.jpg"> <mmg src = "Images/Meinv2.jpg"> <mmg Src = " src = "gambar/meinv4.jpg"> <img src = "gambar/meinv5.jpg"> <img src = "gambar/meinv6.jpg"> </div> <div id = "btnl"> </div> <v id = "btnr"> </div> <Ul id = "num"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> <li> 6 </li> </ul> </div> <script> var box = document.geteLementById ('box'); var con = document.getelementByid (''); imgs=con.getElementsByTagName('img');var btnL=document.getElementById('btnL');var btnR=document.getElementById('btnR');var num=document.getElementById('num');var lis=num.getElementsByTagName('li');var timer1=null,timer2=null;var imgw = imgs [0] .clientWidth; var x = 0; fungsi imgscroll () {// sakelar gambar var start = box.scrollleft; var end = imgw*x; var perubahan = end-start; var minstep = 0; var maxstep = 30; var; steplength = ubah/maxStep; clearInterval (timer2); timer2 = setInterval (function () {minstep ++; // console.log (minstep); if (minstep> = maxStep) {clearIntermal (timer2);} start+= steplength; box.srolflft = evllefor; i ++) {lis [i] .className = 'none';} lis [x] .className = 'select';} function move () {// gulir default ke kiri setiap 3 detik clearInterval (timer1); timer1 = setInterval (function () {x ++; if (x> = iMg (for. i = 0; i <lis.length; btnr.onClick = function () {clearInterval (timer1); x ++; if (x> = imgs.length) {x = 0;} imgscroll (); pindahkan ();} btnl.onClick = function () {clearInterval (timer1); x-if (x <0) {x = imgs.length-1;} imgscroll (); move ();} untuk (var i = 0; i <lis.length; i ++) {lis [i] .index = i; lis [i] .onclick = function () {x = this.index; imgscroll (); move ();Di atas adalah efek carousel gambar dari halaman navigasi Imitasi JS HAO123 yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!