C'est-à-dire que la compatibilité n'a pas été traitée, je ne sais pas comment être exact, j'espère donner quelques conseils
Idées:
1. JS obtient l'objet de groupe de bouton pour donner un événement de clic, tel que btns = document.xxx (). Avant de traverser l'événement, obtenez l'index de l'objet actuel: btns [i] .index = i;
2. Faites correspondre l'index comme l'objet DOM à afficher
3. Pendant le processus de clic, vous devez changer de classe et déterminer d'abord s'il contient une classe spécifiée. S'il y en a un, supprimez-le. S'il y en a un, ajoutez la classe spécifiée. Remarque: if (! Null) est vrai.
4. OnMouseover
Html
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <itle> title </ title> <link rel = "Stylesheet" href = "css / index.css"> <script src = "js / index-banner.js"> </cript> </read> Effet </h3> <section> <div> <div> <ul> <li data-i = "0"> <img src = "img / ferrari.png"> <span> ferrari </span> </li> <li data-i = "1"> <img src = "img / lidedes1.png"> <pande> mirecdes </ spande> data-i = "2"> <img src = "img / bmw.png"> <span> bmw </span> </li> <li data-i = "3"> <img src = "img / audi.png"> <span> audi </ span> </li> </div> <div> <! src = "img / ferrari01.jpg"> <ul> <li> Ferrari1 </li> <li> Ferrari2 </li> <li> Ferrari3 </li> <li> Ferrari4 </li> </ul> </ divichi <li> Mercedes-Benz 1 </li> <li> Mercedes-Benz 2 </li> <li> Mercedes-Benz 3 </li> <li> Mercedes-Benz 4 </li> </ul> </div> <! - BM -> <div> <img src = "img / baom <li> BM-1 </li> <li> BM-2 </li> <li> BM-3 </li> <li> BM-4 </li> </ul> </v> <! - Audi -> <v> <img src = "IMG / AODI01.JPG"> <ul> <li> Audi1 </li> <li> Audi2 </li> <li> Audi4 </li> </ul> </div> </div> </div> </div> </div> </div> </pction> </ody> </html>
CSS
* {Style de liste: aucun; Border: aucun; Décoration du texte: aucune; marge: 0; rembourrage: 0; Dimensionnement de la boîte: Border-Box;} H3 {Text-Align: Centre; Couleur: Dimgrey;}. Baner_Parent {largeur: 1000px; marge: 0 auto;}. will_left {float: gauche;}. will_right {float: droite;}. btn_left ul li {text-align: Center; Largeur: 160px; hauteur: 98px; Color d'arrière-plan: Darkgrey; rembourrage: 13px 0; curseur: pointeur; -Webkit-Transition: Tous les .5S Emplacable-Out; -Moz-Transition: Tous les .5s facilités; -o-transition: tous les .5s facilités; -ms-transition: toutes les .5s facilités; Transition: Tous les .5s facilités;}. Btn_left ul li li.selected {background-color: CornflowerBlue;}. btn_left ul li li: non (: nth-child (4)) {border-bottom: 1px solid dimgrey;}. btn_left ul li img {width: 50px; hauteur: 50px;}. btn_left ul li span {display: block;}. banner_right, .banner_lists img {width: 800px; hauteur: 391px; Position: relative;}. Banner_lists {position: absolue; Hauteur: 391px;}. Banner_lists: non (: nth-child (1)) {affiche: aucun;}. Banner_lists ul {overflow: Hidden; Position: absolue; en bas: 0; gauche: 0;}. btn {hauteur: 33px; Largeur: 200px; Border-droite: 1px solide # 000; marge: -3px; Texte-aligne: Centre; hauteur de ligne: 33px; Color d'arrière-plan: Darkgrey; Opacité: .8; curseur: pointeur; -Webkit-Transition: Tous les .5S Emplacable-Out; -Moz-Transition: Tous les .5s facilités; -o-transition: tous les .5s facilités; -ms-transition: toutes les .5s facilités; Transition: Tous les .5s facilités;}. BTN: Hover, .BTN.Selected {Background-Color: CornflowerBlue;}Js
/ ** * Créé par l'administrateur le 2016/4/30 0030. * Blog: wjf444128852.github.io * IE n'est pas pris en charge * / 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'); // commutateur de marque pour (var i = 0; i <btns.length; i ++) {btns [i] .index = i; btns [i] .onclick = showItems; } // ClassName Switch, contient-il la fonction de classe spécifiée hasclass (elem, cls) {return elem.classname.match (new regexp ('(// s | ^)' + cls + '(// s | $)')); } // Ajout de la fonction de classe spécifiée addClass (elem, cls) {if (! Hasclass (elem, cls)) {elem.classname + = "" + cls; }} // Supprimez la fonction de classe spécifiée RemoveClass (elem, CLS) {if (Hasclass (elem, CLS)) {var reg = new regexp ('(// s | ^)' + cls + '(// s | $)'); elem.classname = elem.classname.replace (reg, ""); }} // ClassName Switch, supprimez toutes les fonctions RemoveAll (obj) {for (var i = 0; i <obj.length; i ++) {reposoveclass (obj [i], "sélectionné"); }} // Div Display Switching Fonction showItems () {reposoLALL (btns); addClass (this, "sélectionné"); pour (var s = 0; s <divlist.length; s ++) {divlist [s] .style.display = "Aucun"; divlist [this.index] .style.display = "bloc"; } willhover (this.index); } // Toggle Button Effect Fonction willHover (sum) {var hoverBtns = divlist [sum] .getElementsByClassName ('btn'); var img = divlist [sum] .getElementsByTagName ('img') [0]; pour (var i = 0; i <hoverbtns.length; i ++) {hoverbtns [i] .index = i; hoverBtns [i] .onMouseOver = function () {re :voLALL (hoverBtns); addClass (this, "sélectionné"); var imgsrc = array [sum] [this.index]; img.src = array [sum] [this.index]; }}} // Par défaut, vous pouvez changer willhover (0);};Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.