IE kompatibilitas belum ditangani, saya tidak tahu bagaimana tepatnya, saya berharap dapat memberikan nasihat
Ide:
1. JS memperoleh objek grup tombol untuk memberikan acara klik, seperti btns = document.xxx (). Sebelum melintasi acara, dapatkan indeks objek saat ini: btns [i] .index = i;
2. indeks pencocokan sebagai objek DOM yang akan ditampilkan
3. Selama proses klik, Anda perlu beralih kelas dan pertama -tama menentukan apakah berisi kelas yang ditentukan. Jika ada satu, hapus. Jika ada, tambahkan kelas yang ditentukan. Catatan: if (! Null) benar.
4. Onmouseover
Html
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> title </iteme> <link rel = "stylesheet" href = "css/index.css"> <cript src = "js/index-banner.js"> </script> script> head = "js/index-banner.js"> </script> scrips = "js/index-banner.js"> </script> script> script src = "js/index-banner.js"> </script> script> scrips = "js/index-banner.js"> </Scrips> <section> <div> <div> <ul> <li data-i = "0"> <img src = "img/ferrari.png"> <span> ferrari </span> </li> <li data-i = "1"> <img src = "iMg/mercedes1.png"> <pan> </ranah/li = "DATE/LI"> </Li "> <pedes> <" Li/Li "> <pedes"> <pedes "> <pedes> <pedes" DATE/LI "> <" Li "> <" src = "img/bmw.png"> <span> bmw </span> </li> <li data-i = "3"> <img src = "img/audi.png"> <span> </span> </li> </div> <v> <!-ferrari-> </span> </li> </div> <v> <!-ferrari-> </span> </li> </div> <v> <!-ferrari-> </span> </li> </Div> <div> <!-ferrari-> </span> </li> </Div> <div> <!-ferrari-> </span> </li> </Div> <div> <! <li> ferrari1 </li> <li> ferrari2 </li> <li> ferrari3 </li> <li> ferrari4 </li> </ul> </div> <!-Mercedes-> <ver> <img src = "img/benchI01.jpg"> <ved> <bedes-ben> Li-Ben> Li-Ben> <Li> Li-Ben> <led-Ben> <Li> Li-Ben> <Li> <led-Ben> <led-Ben> <led-Ben> <led-Ben> <Li> <led-Ben> <li> <li> <led-ben> <li> Mercedes-Benz 3 </li> <li> Mercedes-Benz 4 </li> </ul> </div> <!-bm-> <viv> <img src = "img/baoma01.jpg"> <ul> <li> BM-1 </li> <li> <li> BM-1 </Li> <li> <li> BM-2 </li> <li> <li> BM-4 </li> </ul> </div> <!-Audi-> <veT> <img src = "img/aodi01.jpg"> <ul> <li> Audi1 </li> <li> </Li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> </Audi3 </Li> <li> <li> <li> </Li> <li> <li> </Audi3 </li> <li> <li> <li> </Li> <li> <li> </Audi3 </li> <li> <li> <li> </div> </siction> </body> </html>
CSS
*{List-style: None; Perbatasan: Tidak Ada; Dekorasi Teks: Tidak Ada; Margin: 0; Padding: 0; ukuran kotak: boord-box;} h3 {text-align: center; warna: dimgrey;}. Baner_parent {width: 1000px; margin: 0 auto;}. will_left {float: left;}. will_right {float: right;}. btn_left ul li {text-align: center; Lebar: 160px; Tinggi: 98px; Latar Belakang: Darkgrey; Padding: 13px 0; kursor: pointer; -webkit-transisi: semua kemudahan .5; -Moz-transisi: semua kemudahan .5; -O-transisi: semua .5S kemudahan; -MS-transisi: semua .5S kemudahan; Transisi: semua .5S kemudahan-keluar;}. Btn_Left ul li.Selected {latar belakang-warna: CornflowerBlue;}. Btn_Left ul li: not (: nth-child (4)) {border-Bottom: 1px solid dimgrey;}. btn_left ul li img {wid: 50px: 50px; Tinggi: 50px;}. BTN_LEFT ul li span {display: block;}. Banner_right, .BANNER_LISS IMG {width: 800px; Tinggi: 391px; Posisi: relatif;}. Banner_lists {position: absolute; Tinggi: 391px;}. Banner_lists: not (: nth-child (1)) {display: none;}. Banner_lists ul {overflow: tersembunyi; Posisi: Absolute; Bawah: 0; Kiri: 0;}. Btn {Height: 33px; Lebar: 200px; Border-Right: 1px Solid #000; margin -top: -3px; Teks-Align: tengah; Line-Height: 33px; Latar Belakang: Darkgrey; opacity: .8; kursor: pointer; -webkit-transisi: semua kemudahan .5; -Moz-transisi: semua kemudahan .5; -O-transisi: semua .5S kemudahan; -MS-transisi: semua .5S kemudahan; Transisi: semua .5S kemudahan-keluar;}. Btn: Hover, .btn.Selected {latar belakang-warna: CornFlowerBlue;}JS
/** * Dibuat oleh Administrator pada 2016/4/30 0030. * Blog: WJF444128852.Github.io * IE tidak didukung */window.onload = function () {var arrfr = ['img/ferrari01.jpg', 'img/ferrari02.jpg', 'img/ferrari03.jpg', 'img/ferrari04.jpg']; var arrbc = ['img/benchi01.jpg', 'img/benchi02.jpg', 'img/benchi03.jpg', 'img/bency04.jpg']; var arrbc = ['img/benchi01.jpg', 'img/benchi02.jpg', 'img/benchi03.jpg', 'img/bency04.jpg']; var arrbm = ['img/baoma01.jpg', 'img/baoma02.jpg', 'img/baoma03.jpg', 'img/baoma04.jpg']; var arrad = ['img/aodi01.jpg', 'img/aodi02.jpg', 'img/aodi03.jpg', 'img/aodi04.jpg']; var array = [arrfr, arrbc, arrbm, arrad]; var btns = document.geteLementsbyclassName ('js_btn'); var divlist = document.geteLementsByClassName ('Banner_lists'); // sakelar merek untuk (var i = 0; i <btns.length; i ++) {btns [i] .index = i; btns [i] .onClick = showitems; } // ClassName Switch, apakah berisi fungsi kelas yang ditentukan hasclass (elem, cls) {return elem.classname.match (regexp baru ('(// s |^)'+cls+'(// s | $)')); } // Tambahkan fungsi kelas yang ditentukan addClass (elem, cls) {if (! Hasclass (elem, cls)) {elem.classname+= ""+cls; }} // Hapus fungsi kelas yang ditentukan RemoveClass (elem, cls) {if (hasclass (elem, cls)) {var reg = regexp baru ('(// s |^)'+cls+'(// s | $)'); elem.classname = elem.classname.replace (reg, ""); }} // sakelar classname, hapus semua fungsi removeAll (obj) {for (var i = 0; i <obj.length; i ++) {removeClass (obj [i], "dipilih"); }} // Div Display Switching Function showItems () {removeAll (btns); addClass (ini, "dipilih"); untuk (var s = 0; s <divlist.length; s ++) {divlist [s] .style.display = "tidak ada"; divlist [this.index] .style.display = "block"; } willhover (this.index); } // Toggle Button Effect Function Willhover (SUM) {var hoverBtns = divlist [sum] .geteLementsByClassName ('btn'); var img = divlist [sum] .getElementsbyTagname ('img') [0]; untuk (var i = 0; i <hoverBtns.length; i ++) {hoverBtns [i] .index = i; hoverBtns [i] .onmouseOver = function () {removeAll (hoverBtns); addClass (ini, "dipilih"); var imgsrc = array [sum] [this.index]; img.src = array [sum] [this.index]; }}} // Secara default, Anda dapat beralih Willhover (0);};Daftar JavaScript di atas [kode implementasi] adalah semua konten yang telah saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.