IE -Kompatibilität wurde nicht behandelt, ich weiß nicht, wie ich genau sein kann. Ich hoffe, einige Ratschläge zu geben
Ideen:
1. JS erhält das Schaltflächengruppenobjekt, um ein Klickereignis wie btns = document.xxx () anzugeben. Nehmen Sie vor dem Durchqueren des Ereignisses den Index des aktuellen Objekts ab: BTNS [i] .Index = i;
2. Übereinstimmen Index als das zu angezeigte DOM -Objekt
3. Während des Klickvorgangs müssen Sie die Klasse wechseln und zuerst bestimmen, ob sie eine bestimmte Klasse enthält. Wenn es einen gibt, löschen Sie es. Wenn es einen gibt, fügen Sie die angegebene Klasse hinzu. Hinweis: if (! Null) ist wahr.
4. Onmouseover
Html
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> title </title> <link rel = "styleSheet" href = "css/index.css"> <script src = "js/index-banner.js"> </script> </hects Effekt </h3> <abschnitt> <div> <ul> <li data-i = "0"> <img src = "img/ferrari.png"> <span> ferrari </span> </li> <li data-i = "1"> <img src = "iMg/mercedes1.png"> </span> </span> </spalte 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> <! src = "img/ferrari01.jpg"> <ul> <li> ferrari1 </li> <li> ferrari2 </li> <li> ferrari3 </li> <li> ferrari4 </li> </ul> </div> <! <li> Mercedes-Benz 1 </li> <li> Mercedes-Benz 2 </li> <li> Mercedes-Benz 3 </li> <li> Mercedes-Benz 4 </li> </ul> </div> <!-bm-> <img src = "iMg/baoma01.jpg" <ul> <ul> <ul> <ul> <li> <li> </li> <li> </li> <ul> <ul> <ul> <ul> <li> <li> </li> <ul> <ul> <ul> <li> <li> <li> <li>BM-2</li> <li>BM-3</li> <li>BM-4</li> </ul> </div> <!--Audi--> <div> <img src="img/aodi01.jpg"> <ul> <li>Audi1</li> <li>Audi2</li> <li>Audi3</li> <li>Audi4</li> </ul> </div> </div> </div> </div> </div> </div> </abschnitt> </body> </html>
CSS
*{Listenstil: Keine; Grenze: Keine; Textdekoration: Keine; Rand: 0; Polsterung: 0; Kastengrößen: Border-Box;} H3 {Text-Align: Mitte; Farbe: Dimgrey;}. Baner_Parent {Breite: 1000px; Rand: 0 auto;}. Breite: 160px; Höhe: 98px; Hintergrundfarbe: Darkgrey; Polsterung: 13px 0; Cursor: Zeiger; -Webkit-Übergang: Alle. -moz-Übergang: Alle. -O-Übergang: Alle. -M-Übergang: Alle. Übergang: Alle .5s Leichtigkeit;}. Höhe: 50px;}. Btn_left ul li span {display: block;}. Banner_right, .Banner_lists img {width: 800px; Höhe: 391px; Position: relativ;}. Banner_lists {Position: absolut; Höhe: 391px;}. Banner_lists: nicht (: nth-Kind (1)) {Anzeige: Keine;}. Banner_lists ul {Überlauf: versteckt; Position: absolut; unten: 0; links: 0;}. Btn {Höhe: 33px; Breite: 200px; Grenzrechte: 1PX Solid #000; Rand: -3px; Text-Align: Mitte; Zeilenhöhe: 33px; Hintergrundfarbe: Darkgrey; Deckkraft: .8; Cursor: Zeiger; -Webkit-Übergang: Alle. -moz-Übergang: Alle. -O-Übergang: Alle. -M-Übergang: Alle. Übergang: Alle .5s Easy-Out;}. Btn: Hover, .BTN.Selected {Hintergrundfarbe: CornflowerBlue;}JS
/** * Erstellt von Administrator am 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'); // Markenschalter für (var i = 0; i <btns.length; i ++) {btns [i] .Index = i; btns [i] .onclick = showItems; } // ClassName Switch, enthält er die angegebene Klassenfunktion Hasclass (Elem, Cls) {return elem.className.match (neuer regexp ('(// s |^)'+cls+'(// s | $)')); } // Die angegebene Klassenfunktion addClass (elem, cls) {if (! Hasclass (elem, cls)) {elem.className+= ""+cls; }} // Entfernen Sie die angegebene Klassenfunktion removeClass (elem, cls) {if (hasclass (elem, cls)) {var reg = new Regexp ('(// s |^)'+cls+'(// s | $)'); elem.classname = elem.className.replace (reg, ""); }} // ClassName Switch, entfernen Sie alle Funktionen removeall (obj) {für (var i = 0; i <obj.length; i ++) {removeclass (obj [i], "ausgewählt"); }} // Div -Anzeige -Switching -Funktion showItems () {removeall (btns); AddClass (this, "ausgewählt"); for (var divlist [this.index] .style.display = "block"; } Willhover (this.index); } // Taste -Effekt -Funktion WILLHOVER (sum) {var hoverbtns = divlist [sum] .getElementsByClassName ('btn'); var img = divlist [sum] .getElementsByTagName ('img') [0]; für (var i = 0; i <Hoverbtns.length; i ++) {Hoverbtns [i] .Index = i; Hoverbtns [i] .onmouseover = function () {removeall (Hoverbtns); AddClass (this, "ausgewählt"); var imgsrc = array [sum] [this.index]; img.src = array [sum] [this.index]; }}} // standardmäßig können Sie Willhover (0) wechseln;};Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.