Т.е. совместимость не была обработана, я не знаю, как быть точным, я надеюсь дать несколько советов
Идеи:
1. JS получает объект группы кнопок, чтобы дать событие Click, такое как btns = document.xxx (). Прежде чем пересечь событие, получите индекс текущего объекта: btns [i] .index = i;
2. Совместите индекс как объект DOM, который будет отображаться
3. Во время процесса клика вам необходимо переключить класс и сначала определить, содержит ли он указанный класс. Если есть, удалите его. Если есть, добавьте указанный класс. ПРИМЕЧАНИЕ: если (! NULL) это правда.
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 Эффект </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"> <pran> </span> </li> <lip> </li> <lip> </li> <lip> </li> <li> <li data-i = "2"> <img src = "img/bmw.png"> <pan> bmw </span> </li> <li data-i = "3"> <img src = "img/audi.png"> <pran> 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 = " 1 </li> <li> Mercedes-Benz 2 </li> <li> Mercedes-Benz 3 </li> <li> Mercedes-Benz 4 </li> </ul> </div> <!-bm-> <div> <img src = "img/baoma01.jpg"> <ul> <li> bm-1 </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> <li> <li> <li> <li> <li> <li> <li> <li> <li> </ul> </div> </div> </div> </div> </div> </div> </section> </body> </html>
CSS
*{стиль списка: нет; граница: нет; Текстовое декорация: нет; поля: 0; Заполнение: 0; Распределение коробки: Border-box;} h3 {text-align: center; Цвет: Dimgrey;}. Baner_parent {ширина: 1000px; Margin: 0 auto;}. Will_left {float: left;}. Will_right {float: right;}. Btn_left ul li {text-align: center; Ширина: 160px; Высота: 98px; Фоно-цвета: Darkgrey; Заполнение: 13px 0; курсор: указатель; -Вебкит-трансляция: все .5s ext-out; -Моз-трансляция: все .5s Easy-Out; -О-транзиция: все. -Мас-транзиция: все .5s Easy-Out; Переход: все .5s ext-out;}. btn_left ul li Высота: 50px;}. btn_left ul li span {display: block;}. banner_right, .banner_lists img {width: 800px; Высота: 391px; позиция: относительно;}. banner_lists {position: Absolute; Высота: 391px;}. Banner_lists: не (: nth-child (1)) {display: none;}. Banner_lists ul {overflow: hidden; позиция: абсолютно; Внизу: 0; Слева: 0;}. Btn {height: 33px; Ширина: 200px; граница правая: 1PX SOLID #000; маржинальная версия: -3px; Текст-альбом: Центр; высота линии: 33px; Фоно-цвета: Darkgrey; непрозрачность: .8; курсор: указатель; -Вебкит-трансляция: все .5s ext-out; -Моз-трансляция: все .5s Easy-Out; -О-транзиция: все. -Мас-транзиция: все .5s Easy-Out; Переход: All .5s Easy-Out;}. Btn: Hover, .btn.selected {foangy-color: cornflowerblue;}Младший
/** * Создано администратором 2016/4/30 0030. * Блог: WJF444128852.github.io * IE не поддерживается */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']; arr 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 | $)')); } // Добавление указанной функции класса addClass (elem, cls) {if (! Hasclass (elem, cls)) {elem.classname+= ""+cls; }} // Удалить указанную функцию класса 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], "selected"); }} // div Display Function ShowItems () {removEall (btns); addClass (это, «выбрано»); for (var s = 0; s <divlist.length; s ++) {divlist [s] .style.display = "none"; divlist [this.index] .style.display = "block"; } willhover (this.index); } // Функция эффекта кнопки Toggle Willhover (sum) {var hoverbtns = divilt [sum] .getElementsbyclassname ('btn'); var img = divlist [sum] .getElementsbytagname ('img') [0]; for (var i = 0; i <hoverbtns.length; i ++) {hoverbtns [i] .index = i; hoverbtns [i] .onmouseover = function () {removeall (hoverbtns); addClass (это, «выбрано»); var imgsrc = array [sum] [this.index]; img.src = array [sum] [this.index]; }}} // По умолчанию вы можете переключить WillHover (0);};Вышеуказанный переключение списка JavaScript [код реализации] - это весь контент, которым я поделился с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.