لم يتم التعامل مع التوافق ، لا أعرف كيف أكون دقيقًا ، آمل أن أقدم بعض النصائح
الأفكار:
1. JS يحصل على كائن مجموعة الأزرار لإعطاء حدث نقرة ، مثل BTNS = document.xxx (). قبل اجتياز الحدث ، احصل على فهرس الكائن الحالي: BTNS [i] .index = i ؛
2. فهرس المطابقة ككائن DOM ليتم عرضه
3. أثناء عملية النقر ، تحتاج إلى تبديل الفئة وتحديد ما إذا كانت تحتوي على فئة محددة. إذا كان هناك واحد ، احذفه. إذا كان هناك واحد ، أضف الفئة المحددة. ملاحظة: إذا (! لاغية) صحيح.
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> <viv> <viv> <ul> <li data-i = "0"> <img src = "img/ferrari.png"> <span> ferrari </span> </li> <li data-i = "1" data-i = "2"> <img src = "img/bmw.png"> <span> bmw </span> </li> <li data-i = "3"> <img src = "img/audi.png"> span> audi </lip> </li> </div> <div> <! src = "img/ferrari01.jpg"> <ul> <li> ferrari1 </li> <li> ferrari2 </li> <li> ferrari3 </li> <li> ferrari4 </lenchi> <li> Mercedes-Benz 1 </li> <li> Mercedes-Benz 2 </li> <li> Mercedes-Benz 3 </li> <li> Mercedes-Benz 4 </li> </ul> </viv> </li> </li> <! <li> bm-1 </li> <li> bm-2 </li> <li> bm-3 </li> <li> bm-4 </li> </ul> </viv> <!-audi-> <div> <img src = "img/aodi01.jpg"> <li> audi1 <li> audi4 </li> </ul> </viv> </viv> </viv> </viv> </viv> </viv> </section> </body> </html>
CSS
*{على غرار القائمة: لا شيء ؛ الحدود: لا شيء ؛ تدمير النص: لا شيء ؛ الهامش: 0 ؛ الحشو: 0 ؛ SIZE-SIZE: Border-Box ؛} H3 {text-align: Center ؛ اللون: dimgrey ؛}. Baner_Parent {Width: 1000px ؛ الهامش: 0 auto ؛}. will_left {float: left ؛}. will_right {float: right ؛}. btn_left ul li {text-align: center ؛ العرض: 160 بكسل ؛ الارتفاع: 98 بكسل ؛ خلفية اللون: Darkgrey ؛ الحشو: 13px 0 ؛ المؤشر: مؤشر. -Webkit-transition: All .5s Ease-Out ؛ -الموز ترانس: جميع .5s سهولة ؛ -الران: كل .5s سهولة ؛ -MS الانتقال: كل .5s سهولة ؛ الانتقال: All .5s Ease-Out ؛}. الارتفاع: 50px ؛}. الارتفاع: 391 بكسل ؛ الموقف: قريب ؛} الارتفاع: 391px ؛} الموقف: مطلق ؛ أسفل: 0 ؛ اليسار: 0 ؛}. btn {الارتفاع: 33px ؛ العرض: 200 بكسل ؛ اليمين الحدودي: 1 بكسل صلب #000 ؛ الهامش: -3px ؛ محاذاة النص: المركز ؛ خط الارتفاع: 33px ؛ خلفية اللون: Darkgrey ؛ عتامة: .8 ؛ المؤشر: مؤشر. -Webkit-transition: All .5s Ease-Out ؛ -الموز ترانس: جميع .5s سهولة ؛ -الران: كل .5s سهولة ؛ -MS الانتقال: كل .5s سهولة ؛ الانتقال: All .5s Ease-Out ؛}.JS
/** * تم إنشاؤه بواسطة المسؤول في 2016/4/30 0030. ['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 ؛ } // classname switch ، هل يحتوي على وظيفة الفئة المحددة hasclass (elem ، cls) {return elem.classname.match (new regexp ('(// s |^)'+cls+'(// s | $)') ؛ }. }} // قم بإزالة وظيفة الفئة المحددة REMOVECLASS (ELEM ، CLS) {if (hasclass (elem ، cls)) {var reg = new regexp ('(// s |^)'+cls+'(// s | $)') ؛ elem.className = elem.classname.replace (reg ، "") ؛ }} // classname switch ، قم بإزالة جميع الوظائف removeall (obj) {for (var i = 0 ؛ i <obj.length ؛ i ++) {removeClass (obj [i] ، "select") ؛ }} // div display switching functions () {removeall (btns) ؛ addClass (هذا ، "محدد") ؛ لـ (var s = 0 ؛ s <divlist.length ؛ s ++) {divlist [s] .style.display = "none" ؛ DivList [this.index] .style.display = "block" ؛ } willhover (this.index) ؛ }. 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 = صفيف [sum] [this.index] ؛ img.src = صفيف [sum] [this.index] ؛ }}} // بشكل افتراضي ، يمكنك تبديل WillHover (0) ؛} ؛ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.