IE 호환성은 처리되지 않았고 정확한 방법을 모르겠습니다. 조언을 드리고 싶습니다.
아이디어 :
1. 이벤트를 가로 지르기 전에 현재 객체의 인덱스를 가져옵니다 : btns [i] .index = i;
2. 표시 할 DOM 객체로 인덱스를 일치시킵니다.
3. 클릭 프로세스 중에 클래스를 전환하고 먼저 지정된 클래스가 포함되어 있는지 확인해야합니다. 하나가 있으면 삭제하십시오. 하나가 있으면 지정된 클래스를 추가하십시오. 참고 : (! null)이 사실입니다.
4. OnMouseOver
HTML
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 제목 </title> <link rel = "stylesheet"href = "css/index.css"> <script src = "js/index-banner.js"> 효과 </h3> <섹션> <div> <div> <ul> <li data-i = "0"> <img src = "img/ferrari.png"> <span> ferrari </li> <li data-i = "1"> <img src = "img/mercedes1.png"> <li> </li> </li> </li>. 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> </li> <!-Ferrari-> <div> <div> src = "img/ferrari01.jpg"> <ul> <li> ferrari1 </li> <li> ferrari2 </li> <li> ferrari3 </li> <li> ferrari4 </li> </ul> </div> <div> <img src = "img/bench/bench/benchi01. <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/baoma01.jpg "> <ul> <li> bm-1 </li>. <li> bm-1 </li> <li> bm-2 </li> <li> bm-3 </li> <li> bm-4 </li> </li> </ul> </ul> </div> </div> <!-audi-> <lig src = "img/aodi01.jpg"> <ul> <li> audi1 </li> <li> <li> <li> <li> <li> <li> audi4 </li> </ul> </div> </div> </div> </div> </div> </div> </section> </body> </html>
CSS
*{목록 스타일 : 없음; 국경 : 없음; 텍스트 결정 : 없음; 여백 : 0; 패딩 : 0; 박스 사이징 : Border-Box;} h3 {텍스트-정렬 : 센터; 색상 : Dimgrey;}. Baner_parent {너비 : 1000px; 마진 : 0 Auto;}. Will_Left {float : left;}. Will_right {float : right;}. btn_left ul li {text-align : center; 너비 : 160px; 높이 : 98px; 배경색 : Darkgrey; 패딩 : 13px 0; 커서 : 포인터; -webkit-transition : 모든 .5s 편의성; -Moz-transition : 모든 .5S 편의성; -o-ransition : 모든 .5s 편의성; -ms-transition : 모든 .5s 편의성; 전환 : 모든 .5s ease-out;}. btn_left ul li li.selected {back 높이 : 50px;}. 높이 : 391px; 위치 : 상대;}. Banner_Lists {위치 : 절대; 높이 : 391px;}. banner_lists : not (: nth-Child (1)) {display : none;}. Banner_lists ul {오버 플로 : 숨겨진; 위치 : 절대; 하단 : 0; 왼쪽 : 0;}. btn {높이 : 33px; 너비 : 200px; 경계 오른쪽 : 1px Solid #000; 마진 -탑 : -3px; 텍스트 정렬 : 센터; 라인 높이 : 33px; 배경색 : Darkgrey; 불투명도 : .8; 커서 : 포인터; -webkit-transition : 모든 .5s 편의성; -Moz-transition : 모든 .5S 편의성; -o-ransition : 모든 .5s 편의성; -ms-transition : 모든 .5s 편의성; 전환 : 모든 .5S 이완;}. btn : 호버, .btn.selected {backJS
/** * 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']; 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'); // (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, 모든 함수를 제거합니다 removeAle (obj) {for (var i = 0; i <obj.length; i ++) {removeClass (obj [i], "selected"); }} // div 디스플레이 스위칭 함수 showitems () {removeall (btns); AddClass (this, "selected"); for (var s = 0; s <divlist.length; s ++) {divlist [s] .style.display = "none"; divlist [this.index] .style.display = "block"; } WillHover (this.index); } // 토글 버튼 효과 함수 WillHover (sum) {var hoverbtns = divlist [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 (this, "selected"); var imgsrc = 배열 [sum] [this.index]; img.src = 배열 [sum] [this.index]; }}} // 기본적으로 WillHover (0);}을 전환 할 수 있습니다.위의 JavaScript List Switching [구현 코드]은 내가 공유 한 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.