나는 실수로 내가 전에 쓴이 작은 것을 보았고 그것을 게시하고, 프론트 엔드 초보자를 위해 클릭 클릭 및 자동 회전 목마를 지원합니다!
코드는 다음과 같습니다.
<div> <ul> <li> <IMG SRC = "IMG/PIC_1.jpg"/> </li> <li> <IMG SRC = "IMG/PIC_2.JPG"/> </li> <li> <IMG SRC = "IMG/PIC_3.JPG"/> <li> <img SRC = "IMG/JPG" /> </li> <li> <IMG SRC = "IMG/PIC_5.JPG"/> </li> </li> </ul> <ul> <li> 프로젝트 1 </li> <li> 프로젝트 2 </li> <li> 프로젝트 3 </li> <li> 프로젝트 4 </li> </ul> </div>
HTML
여기에서 이미지 경로를 로컬 경로로 변경하면됩니다.
.scroll_div {너비 : 1000px; 높이 : 370px; 여백 : 0 Auto; 패딩 : 10px;}. scroll_div .pic {너비 : 820px; 높이 : 370px; 오버플로 : 숨겨진; 위치 : 상대; float : 왼쪽;}. Scroll_div .pic li {너비 : 820px; 높이 : 370px; 위치 : 절대; 상단 : 0; 왼쪽 : 0; 디스플레이 : none;}. scroll_div .btn li {너비 : 173px;}. scroll_div .btn li {너비 : 173px; 높이 : 66px; 디스플레이 : 블록; 플로트 : 왼쪽; 텍스트 정렬 : 센터; 색상 : #ffff; 글꼴 : 18px/100% "Microsoft Yahei"; 글꼴 중량 : 대담한; 배경 :#008dd8; 마진 바닥 : 10px; 라인 높이 : 66px; 커서 : 포인터;}. scroll_div .btn li.on {background :#d73737;} li {List-Style : none;}CSS
$ (function () {var listlen = $ ( ". pic li"). 길이, i = 0, setInter, speen = 3000;/*pic carousel*/$ ( ". btn li : last"). css ({ "margin": "0px 0px 0px 0px"}); $ "(". " li : first "). show (); $ (". btn li "). 각 (함수 (index, element) {$ (요소) .click (function () {i = index; $ (this) .addclass ("on "). removeclass ("on "); $ (". pic li ") listlen) {i ++;} else {i = 0;}; $ ( ". btn li") li ").