1. 키 포인트 :
1. 페이지가로드되면 그림이 겹치고 함께 쌓입니다.
2. 첫 번째 그림은 다른 사진이 숨겨져 있습니다.
3. 첨자를 설정하고 위시 색상을 그림으로 이동하도록하십시오.
.
2. 구현 코드 :
HTML 코드 :
<! docType html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> href = "css/lunbimg.css"rel = "Stylesheet"/> <script src = "js/jquery-1.10.2.min.js"> </script> <script src = "js/lunbimg.js"> </script> </head> <div id = "allswapimg"> src = "image/1.jpg"/> </div> <div> <Img src = "image/2.jpg"/> </div> <div> <img src = "image/3.jpg"/> </div> <div> <img src = "image/4.jpg"/> </div> <img src = "Image/5. JPG" " /> </div> <div> <IMG SRC = "Image/6.jpg"/> </div> </div> <div> <</div> <div >> </div> <div id = "tabs"> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> </div> </body> </html>
CSS 코드 :
* {padding : 0px; 마진 : 0px;}. swapimg {position : absolute;}. btn {btn {위치 : 절대; 높이 : 90px; 너비 : 60px; 배경 : RGBA (0,0,0.5);/* 배경 색상을 검은 색으로 설정하고 투명도가 있습니다. 50%*/color : #ffffff; 텍스트-정렬 : 중심; 라인 높이 : 90px; font-size : 40px; 상단 : 155px;/*이미지 높이 400/2-45*/커서 : 포인터;/*디스플레이 : 없음;*/} {위치 : 절대; 상단 : 370px; 마진-왼쪽 : 350px;}. 탭 {높이 : 20px; 너비 : 20px; 배경 :#05e9e2; 선-높이 : 20px; 텍스트-정렬 : 중심; font-size : 10px; float : 왼쪽; 왼쪽; #ffffff; 마진-오른쪽 : 10px; 테두리-라디우스 : 100%; 커서 : 포인터;}. bg {00ff21;}JS 코드 :
/// <참조 경로 = "_ 참조 .js"/> var i = 0; // global variable // 회전 목마 var time을 얻기 위해 변수를 정의합니다. $ ( ". swapimg"). eq (0) .show (). siblings (). hide (); showtime (); // 마우스가 그림을 표시하기 위해 첨자에 배치되면 마우스가 멀어지고 회전 목마를 계속 유지하고 계속해서 $ ( ". 탭"). $ (this). index (); show (); // 마우스를 켜진 후 정지하는 방법은 변수를 얻고 회전 목마를 지우고 ClearInterval (time); {showtime ();})로 변수를 전달하는 방법을 왼쪽으로 클릭 할 때 (btnleft를 클릭하십시오. ClearInterval (시간); // 클릭 후 -1if (i == 0) {i = 6;} i -; show (); showtime ();}); $ ( ". btnright"). 클릭 (function () {// 1. 클릭하기 전에 Carousel Clearinterval (시간)을 중지해야합니다. -10 5) {i = 5) {i == 5) -1;} i ++; show (); showtime ();});}); function show () {//$(”{//"#allswapimg").hover(function () // $ ( ". btn"). show (); //}, function () // $ ( ") 페이드 아웃 (300)은 페이드 아웃, 필터링 시간 0.3S $ ( ". swapimg"). setInterval (function () {i ++; if (i == 6) {// 6 장만 표시되므로 6을 초과 할 수 없습니다. 6과 같으면 첫 번째 그림 i = 0;}와 동일하게 만들 것입니다. show ();}, 3000);}.위는 귀하에게 소개 된 JavaScript를 기반으로 한 회전식 다이어그램의 구현 코드입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!