전체 프로젝트는 첨부파일에 있습니다 코드 복사 코드는 다음과 같습니다. < ;!DOCTYPE html> <제목>이미지 전환 <br>var num = 0 <br>$(function(){ <br>$(" div ol li").mouseover(function(e){ <br>$(this).attr("class","current"); <br>$(this).siblings().attr( "class", ""); //형제 노드의 클래스 속성이 비어 있음<br>//alert($('ul').index()) <br>num = $('ul') .index() 2 <br>var index = $(this).index(); //ul에 선택한 li 태그의 인덱스를 기록합니다<br>//현재 사진을 표시하기 위해 사진이 계단식으로 나타납니다. , 현재 그림의 Z-색인을 변경합니다. 값은 다른 형제 요소보다 크게 설정됩니다. <br>$("div ul li").eq(index).css({"left":"650px", "zIndex":num}) <br>$("div ul li").eq(index).siblings().css("zIndex",num-1) <br>//애니메이션 효과, 그림이 날아갑니다. 오른쪽에서 <br>$("div ul li") .eq(index).animate({left:"0"},500) <br><br>}) <br><br>}) ; <br> <br>*{margin: 0px;border: 0px;} <br>ul,ol{list -style: none;} <br>.all{width:650px ;height: 250px;margin: 100px auto;position:relative;border: 1px solid crimson;overflow: hide;} <br>.all ul{위치:relative ;z-index: 1;위치: 상대;} <br> <br>/*아들은 아버지와 같아야 합니다*/ <br>.all ul li{위치: 절대;왼쪽: 0;상단: 0px;} <br><br>.all ol{위치: 절대;z-색인: 2; 오른쪽: 10px;하단: 10px;} <br>.all ol li{너비: 20px;높이: 20px;배경: #333; 테두리: 1px 솔리드 #509629;글꼴-가중치: <br>bold;text- 정렬: 중앙; 줄 높이: 20px; 부동: 왼쪽; 여백-왼쪽: 10px; 여백-상단: 10px;} <br><br>.all ol .current{width: 30px;height: 30px;line-height: 30px; border: 1px solid red; margin-top: 0px; <br>커서: 포인터;} <br> 🎜> < ;div class="all"> 1 2 🎜>4
