Es decir, la compatibilidad no se ha manejado, no sé cómo ser exactos, espero dar algunos consejos
Ideas:
1. JS obtiene el objeto de grupo de botones para dar un evento de clic, como btns = document.xxx (). Antes de atravesar el evento, obtenga el índice del objeto actual: btns [i] .index = i;
2. Index de coincidir como el objeto DOM a mostrar
3. Durante el proceso de clic, debe cambiar de clase y primero determinar si contiene una clase especificada. Si hay uno, elimínelo. Si hay uno, agregue la clase especificada. Nota: si (! Null) es verdadero.
4. On MouseOver
Html
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> <link rel = "stylesheet" href = "css/index.css"> <script src = "js/index-banner.js"> </script> </bod> <hod <h3> Efecto </h3> <Sectrect> <div> <divs> <ul> <li data-i = "0"> <img src = "img/ferrari.png" 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> </div> <!-Mercedes-> <div> <img src = "img/benchi01.jpg" <li> Mercedes-Benz 1 </li> <li> Mercedes-Benz 2 </li> <li> Mercedes-Benz 3 </li> <li> Mercedes-Benz 4 </li> </ul> </div> <!-Bm-> <div> <MG SRC = "IMG/BAOMA01.JPG"> <ul> <li> BM-1 <//Li> <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> <li>Audi1</li> <li>Audi2</li> <li>Audi3</li> <li> Audi4 </li> </ul> </div> </div> </div> </div> </div> </div> </section> </body> </html>
CSS
*{Estilo de lista: ninguno; borde: ninguno; Decoración de texto: ninguna; margen: 0; relleno: 0; box-sizing: border-box;} h3 {text-align: center; color: dimgrey;}. baner_parent {ancho: 1000px; margen: 0 auto;}. will_left {float: izquierda;}. will_right {float: right;}. btn_left ul li {text-align: center; Ancho: 160px; Altura: 98px; Color de fondo: Darkgrey; relleno: 13px 0; cursor: puntero; -WebKit-Transition: todos los .5s facilitados; -Moz-Transition: todos los .5 al facilidad; -O-transición: todos los .5 aliviados; -Ms-Transition: todos los .5 al facilidad; Transición: todos los .5s facilitados;}. btn_left ul li li.selected {background-color: mainflowerblue;}. btn_left ul li li: no (: nth-child (4)) {border-bottom: 1px sólido dimgrey;}. btn_left ul iMg {50px; altura: 50px;}. Btn_left ul li span {display: block;}. banner_right, .banner_lists img {ancho: 800px; Altura: 391px; posición: relativo;}. banner_lists {posición: absoluto; altura: 391px;}. banner_lists: no (: nth-child (1)) {visual Posición: Absoluto; Abajo: 0; Izquierda: 0;}. Btn {altura: 33px; Ancho: 200px; Border-Right: 1px Solid #000; margen -top: -3px; Text-Align: Center; Línea de altura: 33px; Color de fondo: Darkgrey; Opacidad: .8; cursor: puntero; -WebKit-Transition: todos los .5s facilitados; -Moz-Transition: todos los .5 al facilidad; -O-transición: todos los .5 aliviados; -Ms-Transition: todos los .5 al facilidad; Transición: todos los .5s facilitados;}. btn: hover, .btn.selected {background-color: mainflowerblue;}Js
/** * Creado por el administrador en 2016/4/30 0030. * Blog: wjf444128852.github.io * IE no es compatible */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'); // Switch de marca para (var i = 0; i <btns.length; i ++) {btns [i] .index = i; btns [i] .Enclick = showItems; } // switch className, ¿contiene la función de clase especificada Hasclass (elem, cls) {return elem.classname.match (new regexp ('(// s |^)'+cls+'(// s | $)')); } // Agregue la función de clase especificada addClass (elem, cls) {if (! Hasclass (elem, cls)) {elem.classname+= ""+cls; }} // Eliminar la función de clase especificada RemoVeClass (Elem, CLS) {if (HasClass (Elem, CLS)) {var reg = new Regexp ('(// s |^)'+cls+'(// s | $)'); elem.classname = elem.classname.replace (reg, ""); }} // switch classname, elimine todas las funciones retroceso (obj) {for (var i = 0; i <obj.length; i ++) {eliminarLass (obj [i], "seleccionado"); }} // función de conmutación de visualización de div showItems () {removeall (btns); addClass (esto, "seleccionado"); para (var s = 0; s <divlist.length; s ++) {divlist [s] .style.display = "ninguno"; divlist [this.index] .style.display = "bloque"; } willhover (this.index); } // Función de efecto del botón de alternativa Willhover (suma) {var hoverBtns = divlist [suma] .getElementsByClassName ('btn'); var img = divlist [suma] .getElementsBytagName ('img') [0]; para (var i = 0; i <hoverbtns.length; i ++) {hoverbtns [i] .index = i; Hoverbtns [i] .onmouseover = function () {removeall (hoverbtns); addClass (esto, "seleccionado"); var imgsrc = array [suma] [this.index]; img.src = array [suma] [this.index]; }}} // Por defecto, puede cambiar Willhover (0);};Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.