IE ความเข้ากันได้ไม่ได้รับการจัดการฉันไม่รู้ว่าจะเป็นอย่างไรฉันหวังว่าจะให้คำแนะนำบางอย่าง
แนวคิด:
1. JS ได้รับวัตถุกลุ่มปุ่มเพื่อให้เหตุการณ์คลิกเช่น btns = document.xxx () ก่อนที่จะข้ามเหตุการณ์ให้รับดัชนีของวัตถุปัจจุบัน: btns [i] .index = i;
2. ดัชนีจับคู่เป็นวัตถุ DOM ที่จะแสดง
3. ในระหว่างกระบวนการคลิกคุณต้องสลับคลาสและพิจารณาก่อนว่ามีคลาสที่ระบุหรือไม่ หากมีหนึ่งให้ลบออก หากมีหนึ่งให้เพิ่มคลาสที่ระบุ หมายเหตุ: ถ้า (! null) เป็นจริง
4. OnMouseOver
HTML
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> ชื่อเรื่อง </title> <link rel = "stylesheet" href = "css/index.css"> <script src = "js/index-banner.js เอฟเฟกต์ </h3> <section> <div> <div> <ul> <li data-i = "0"> <img src = "img/ferrari.png"> <pan> ferrari </span> </li> <li data-i = "1"> <img src = "img/mercedes1 data-i = "2"> <img src = "img/bmw.png"> <span> bmw </span> </li> <li data-i = "3"> <img src = "img/udi.png" src = "img/ferrari01.jpg"> <ul> <li> ferrari1 </li> <li> ferrari2 </li> <li> ferrari3 </li> <li> ferrari4 </li> <li> Mercedes-Benz 1 </li> <li> Mercedes-Benz 2 </li> <li> Mercedes-Benz 3 </li> <li> Mercedes-Benz 4 </li> </ul> </div> <! <li> BM-1 </li> <li> BM-2 </li> <li> BM-3 </li> <li> BM-4 </li> </ul> </div> <!-Audi-> <div> <img src = "img/aodi01.jpg"> <ul> <ul> <ul> <li> Audi4 </li></ul> </div> </div> </div> </div> </div> </div> </section
CSS
*{list-style: none; ชายแดน: ไม่มี; การตกแต่งข้อความ: ไม่มี; มาร์จิ้น: 0; Padding: 0; การปรับขนาดกล่อง: border-box;} h3 {text-allign: center; สี: dimgrey;}. baner_parent {width: 1000px; ระยะขอบ: 0 auto;}. will_left {float: ซ้าย;}. will_right {float: ขวา;}. btn_left ul li li {text-allign: center; ความกว้าง: 160px; ความสูง: 98px; พื้นหลังสี: Darkgrey; Padding: 13px 0; เคอร์เซอร์: ตัวชี้; -webkit-transition:. 5S ทั้งหมดง่ายขึ้น; -MOZ-TRANSITION: ความสะดวก. 5S ทั้งหมด; -O-Transition:. 5S ทั้งหมดง่ายขึ้น; -MS-TRANSITION:. 5S ทั้งหมดง่ายขึ้น; การเปลี่ยนแปลง:. 5S ทั้งหมด EASE-OUT;}. BTN_LEFT UL LI LI.SELECTED {พื้นหลัง-สี: CORNFLOWERBLUE;}. BTN_LEFT UL LI LI: ไม่ใช่ (: Nth-Child (4)) {Border-Bottom: 1px Solid Dimgrey; ความสูง: 50px;}. btn_left ul li li li {display: block;}. banner_right, .banner_lists img {width: 800px; ความสูง: 391px; ตำแหน่ง: ญาติ;}. banner_lists {ตำแหน่ง: สัมบูรณ์; ความสูง: 391px;}. banner_lists: ไม่ (: nth-child (1)) {display: none;}. banner_lists ul {overflow: ซ่อน; ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 0; ซ้าย: 0;}. btn {ความสูง: 33px; ความกว้าง: 200px; ชายแดนขวา: 1px Solid #000; ขอบด้านบน: -3px; TEXT-ALIGN: CENTER; ระดับความสูง: 33px; พื้นหลังสี: Darkgrey; ความทึบ: .8; เคอร์เซอร์: ตัวชี้; -webkit-transition:. 5S ทั้งหมดง่ายขึ้น; -MOZ-TRANSITION: ความสะดวก. 5S ทั้งหมด; -O-Transition:. 5S ทั้งหมดง่ายขึ้น; -MS-TRANSITION:. 5S ทั้งหมดง่ายขึ้น; การเปลี่ยนแปลง:. 5S ทั้งหมด EASE-OUT;}. BTN: HOVER, .BTN.SELECTED {พื้นหลังสี: CORNFLOWERBLUE;}JS
/** * สร้างโดยผู้ดูแลระบบเมื่อ 2016/4/30 0030. * บล็อก: WJF444128852.github.io * IE ไม่รองรับ */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/benchi04.jpg']; var arrbc = ['img/benchi01.jpg', 'img/benchi02.jpg', 'img/benchi03.jpg', 'img/benchi04.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'); // สวิตช์แบรนด์สำหรับ (var i = 0; i <btns.length; i ++) {btns [i] .index = i; btns [i] .onclick = showitems; } // switch className มีฟังก์ชั่นคลาสที่ระบุ hasclass (elem, cls) {return elem.classname.match (ใหม่ regexp ('(// s |^)'+cls+'(// s | $))); } // ผนวกฟังก์ชันคลาสที่ระบุ addClass (elem, cls) {ถ้า (! hasclass (elem, cls)) {elem.classname+= ""+cls; }} // ลบฟังก์ชั่นคลาสที่ระบุ RemoveClass (elem, cls) {ถ้า (hasclass (elem, cls)) {var reg = new regexp ('(// s |^)'+cls+'(// s | $)'); elem.className = elem.classname.replace (reg, ""); }} // switch className, ลบฟังก์ชั่นทั้งหมด removeAll (obj) {สำหรับ (var i = 0; i <obj.length; i ++) {removeClass (obj [i], "เลือก"); }} // Div Display Switching Function showItems () {removeAll (btns); AddClass (สิ่งนี้ "เลือก"); สำหรับ (var s = 0; s <divlist.length; s ++) {divlist [s] .style.display = "ไม่มี"; Divlist [this.index] .style.display = "block"; } Willhover (this.index); } // ฟังก์ชั่นเอฟเฟกต์ปุ่มสลับ Willhover (ผลรวม) {var hoverbtns = divlist [sum] .getElementsByClassName ('BTN'); var img = divlist [sum] .getElementsByTagname ('img') [0]; สำหรับ (var i = 0; i <hoverbtns.length; i ++) {hoverbtns [i] .index = i; hoverbtns [i] .onmouseover = function () {removeAll (hoverbtns); AddClass (สิ่งนี้ "เลือก"); var imgsrc = array [sum] [this.index]; img.src = array [sum] [this.index]; }}} // โดยค่าเริ่มต้นคุณสามารถสลับ Willhover (0);};การสลับรายการ JavaScript ด้านบน [รหัสการใช้งาน] เป็นเนื้อหาทั้งหมดที่ฉันได้แชร์กับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น