Ou seja, a compatibilidade não foi tratada, não sei como ser exato, espero dar alguns conselhos
Ideias:
1. JS obtém o objeto do grupo de botões para fornecer um evento de clique, como BTNS = document.xxx (). Antes de atravessar o evento, obtenha o índice do objeto atual: btns [i] .index = i;
2. Combine o índice como o objeto DOM a ser exibido
3. Durante o processo de clique, você precisa alternar a classe e primeiro determinar se ela contém uma classe especificada. Se houver um, exclua -o. Se houver um, adicione a classe especificada. NOTA: Se (! NULL) for verdadeiro.
4. OnMouseOver
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></head><body> <h3>javascript switching Efeito </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.png"> data-i = "2"> <img src = "img/bmw.png"> <pan> bmw </span> </li> <li data-i = "3"> <img src = "img/audi.png"> <span> Audi </span> </li> </div> <beri.png "> src = "img/ferrari01.jpg"> <ul> <li> Ferrari1 </li> <li> Ferrari2 </li> <li> Ferrari3 </li> <li> Ferrari4 </li> </ul> <! <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/Baoma-1.jpg"> <li> BM-1 </li> <li> BM-2 </li> <li> BM-3 </li> <li> BM-4 </li> </ul> </div> <!-Audi-> </Div> <iMI> Src = "IMG/AODI01.JPG"> </Ul> <li> AUDI1 </AUDI> <li> Audi4 </li>
CSS
*{estilo de lista: nenhum; fronteira: nenhuma; Decoração de texto: Nenhum; margem: 0; preenchimento: 0; Timing de caixa: Border-box;} h3 {text-align: Center; cor: dimgrey;}. baner_parent {width: 1000px; margem: 0 auto;}. will_left {float: esquerda;}. Largura: 160px; Altura: 98px; Background-Color: Darkgrey; preenchimento: 13px 0; Cursor: Ponteiro; -Webkit-transição: todos .5s facilitar; -moz-transição: todos .5s facilitar; -O-transição: todos .5s facilmente; -ms-transição: todos .5s facilmente; Transição: Todos .5s facilitar;}. Altura: 50px;}. btn_left ul li span {display: block;}. banner_right, .banner_lists img {width: 800px; Altura: 391px; Posição: relativa;}. Banner_lists {Posição: Absolute; Altura: 391px;}. Banner_lists: Not (: Nth-Child (1)) {Display: Nenhum;}. Banner_lists ul {Overflow: Hidden; Posição: Absoluto; Inferior: 0; Esquerda: 0;}. Btn {Hight: 33px; Largura: 200px; Fronteira: 1px Solid #000; margin -top: -3px; Alinhamento de texto: centro; altura da linha: 33px; Background-Color: Darkgrey; opacidade: .8; Cursor: Ponteiro; -Webkit-transição: todos .5s facilitar; -moz-transição: todos .5s facilitar; -O-transição: todos .5s facilmente; -ms-transição: todos .5s facilmente; Transição: Todos .5s facilitar;}.JS
/** * Criado pelo Administrador em 2016/4/30 0030. * Blog: wjf444128852.github.io * IE não é suportado */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 arad = ['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] .OnClick = showItems; } // ClassName Switch, contém a função de classe especificada Hasclass (elem, cls) {return elem.classname.match (new regexp ('(// s |^)'+cls+'(// s | $)')); } // Anexe a função da classe especificada addclass (elem, cls) {if (! Hasclass (elem, cls)) {elem.className+= ""+cls; }} // Remova a função de classe especificada removeclass (elem, cls) {if (hasclass (elem, cls)) {var reg = new regexp ('(// s |^)'+cls+'(// s | $)'); elem.className = elem.classname.replace (reg, ""); }} // ClassName Switch, remova todas as funções removeall (obj) {for (var i = 0; i <obj.length; i ++) {removeclass (obj [i], "selecionado"); }} // Div Display Switching function showItems () {removeall (BTNS); addclass (isto, "selecionado"); for (var s = 0; s <divlist.length; s ++) {divlist [s] .style.display = "nenhum"; divlist [this.index] .style.display = "bloco"; } Willhover (this.index); } // Função do efeito do botão de alternância Willhover (soma) {var hoverbtns = divlist [sum] .getElementsByclassName ('btn'); var iMg = divlist [sum] .getElementsByTagName ('img') [0]; para (var i = 0; i <hoverbtns.length; i ++) {hoverbtns [i] .index = i; hoverbtns [i] .onMouseOver = function () {removeall (hoverbtns); addclass (isto, "selecionado"); var imgsrc = matriz [sum] [this.index]; img.src = array [sum] [this.index]; }}} // Por padrão, você pode alternar Wilhover (0);};O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.