Artikel ini membagikan kode spesifik untuk menggunakan JS untuk membuat efek korsel di beranda situs web umum untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> gambar carousel </iteme> <tyle> .warp {width: 600px; Tinggi: 750px; Posisi: kerabat; Margin: 30px Auto 0; meluap: tersembunyi; } #box {width: 600px; Tinggi: 750px; Posisi: Absolute; Atas: 0px; Kiri: 0px; meluap: tersembunyi; /*overflow-x: auto;*/} #box #con {width: 6000px; Tinggi: 750px; meluap: tersembunyi; } #con img {float: left; Lebar: 600px; Tinggi: 750px; } #btnl {position: absolute; Kiri: 0px; Atas: 366px; Lebar: 36px; Tinggi: 36px; latar belakang: url (gambar/btnl.png) 0 0 no-repeat; kursor: pointer; } #btnr {position: absolute; Kanan: 0px; Atas: 366px; Lebar: 36px; Tinggi: 36px; latar belakang: url (gambar/btnr.png) 0 0 no-repeat; kursor: pointer; } #num {position: absolute; Bawah: 10px; Kiri: 148px; meluap: tersembunyi; List-style: tidak ada; } #num li {float: left; margin: 0 5px; font-size: 16px; Line-Height: 25px; Tinggi: 25px; Lebar: 25px; Latar Belakang: #CCC; Teks-Align: tengah; kursor: pointer; } #num li.select {latar belakang-warna: green; Warna: Putih; } </tyle> </head> <body> <div> <div id = "box"> <div id = "con"> <img src = "gambar/meinv1.jpg"> <img src = "gambar/meinv2.jpg"> <mg src = "gambar/miinv3.jpg"> <pmg src = "gambar/meinv3.jpg"> <pmg src = "gambar/meinv3.jpg"> <pimg src = "Images/Meinv3.jpg"> <pimg src = "Images/MeINV3.JPG"> <IMMG SRC/"Images/MEINV3. src="images/meinv5.jpg"> <img src="images/meinv6.jpg"> </div> </div> <div id="btnL"></div> <div id="btnR"></div> <ul id="num"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li> 5 </li> <li> 6 </li> </div> <script> var box = document.getElementById ('box'); var con = document.geteLementById ('con'); var imgs = con.geteLementsbyTagname ('img'); var btnl = document.geteLementById ('btnl'); var btnr = document.geteLementById ('btnr'); var num = document.geteLementById ('num'); var num = document.geteLementById ('num'); var num = document.geteLementById ('num'); var btnr = document.getElementById ('num'); var num = document.geteLementById ('num'); 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 change = end-start; var minstep = 0; var maxstep = 30; var steplength = ubah/maxstep; ClearInterval (Timer2); timer2 = setInterval (function () {minstep ++; // console.log (minstep); if (minstep> = maxStep) {clearInterval (timer2);} mulai+= steplength; box.scrollft = start;}, 20) untuk (var i = 0; i <lis. } lis [x] .className = 'pilih'; } function move () {// gulir default ke kiri setiap 3 detik clearInterval (timer1); timer1 = setInterval (function () {x ++; if (x> = imgs.length) {x = 0;} imgscroll (); untuk (var i = 0; i <lis.length; i ++) {lis [i] .className = 'tidak ada'; lis [x] .className = ' } move (); // Mulai fungsi gulir default; btnr.onClick = function () {clearInterval (timer1); x ++; if (x> = imgs.length) {x = 0; } imgscroll (); bergerak(); } btnl.onClick = function () {clearInterval (timer1); X--; if (x <0) {x = imgs.length-1; } imgscroll (); bergerak(); } untuk (var i = 0; i <lis.length; i ++) {lis [i] .index = i; lis [i] .onClick = function () {x = this.index; imgscroll (); bergerak(); }} </script> </body> </html>Efek spesifik didasarkan pada efek dari carousel gambar halaman navigasi HAO123. Anda dapat pergi ke situs web untuk merujuknya.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.