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> <body> <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. 5.jpg"/>>>/</div> <img src =. <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> </div> 5 </div> </div> </ht> </div> </div> </div> </div> </div>
CSS 코드 :
* {패딩 : 0px; 여백 : 0px;}. swapimg {위치 : 절대; } .btn {위치 : 절대; 높이 : 90px; 너비 : 60px; 배경 : RGBA (0,0,0,0.5);/*배경색을 검은 색으로 설정하고 투명성은 50%*/ 색상입니다 : #ffffff; 텍스트 정렬 : 센터; 라인 높이 : 90px; 글꼴 크기 : 40px; 상단 : 155px;/*이미지 높이 400/2-45*/커서 : 포인터; /* display:none ;*/ }.btnright {왼쪽 : 840px;/*이미지 너비 900- 삭제 너비 60*/}#탭 {위치 : 절대; 상단 : 370px; 마진-왼쪽 : 350px;}. 탭 {높이 : 20px; 너비 : 20px; 배경 :#05E9E2; 라인 높이 : 20px; 텍스트 정렬 : 센터; 글꼴 크기 : 10px; 플로트 : 왼쪽; 색상 : #ffffff; 마진 오른쪽 : 10px; Border-Radius : 100%; 커서 : 포인터;}. bg {배경 :#00ff21;}JS 코드 :
/// <참조 경로 = "_ 참조 .js"/> var i = 0; // global variable // 회전 목마 var time 프로세스를 얻기 위해 변수를 정의합니다. $ ( ". swapimg"). eq (0). siplings (). hide (); 마우스가 켜져있는 후, 변수를 ClearInterval로 전달하십시오. (i = 6). function show () {//$("#allswapimg").hover(function () // {// $ ( ". btn"). show (); //}, function () // {// $ ( ". btn"). hide (); //}); // Fadein (300)은 페이드로, 페이드 아웃 (300)이 페이드 아웃, 시간 0.3S $ ( ". swapimg"). eq (i) .fadein (300) .siblings (). fadeout (); $ ( ". 탭"). eq (i) .addclass ( "bg"). siblings (). removeClass ( "bg");} 함수 showtime () {time = setInterval (function () {i ++; if (i == 6) {// i를 초과 할 수 없다면, 우리가 6 개를 초과 할 수 없다. show (); | 3000);}회전 목마 이미지의 효과를 간단히 실현하는 위의 예는 내가 공유하는 모든 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.