오늘 나는 다른 사람이 쓴 슬라이딩 이미지를 보았습니다. 멋져 보였다. 소스 코드를 읽을 때 조금 어려워 보였습니다. 그래서 나는 모방하고 하나를 썼습니다. 효과는 원래 웹 페이지와 동일하지만 내 자신의 JS 코드는 논리가 간단하며 개선해야합니다.
추신 : 이틀 전에 회전 목마를 썼는데 그 호환성은 좋지 않습니다. 오늘이 웹 페이지를 썼을 때, 나는 또한이 아이디어를 따르고 Chrome에서 매우 잘 운영되었습니다. Firefox의 많은 기능을 구현할 수 없습니다. 랩 패널은 절대 위치를 사용하기 때문에 번역 번역이 왼쪽으로 변경됩니다. 변경 후 각 브라우저는 잘 작동합니다.
특정 코드는 다음과 같습니다
HTML 코드 (댓글 없음)
<div> <h1> 시차 슬라이더 </h1> <div> <div> <div id = "bg_1"style = "왼쪽 : 0px;"> </div> <div id = "bg_2"style = "왼쪽 : 0px;"> </div> <div> <div> <img id = ""> </div "; 스타일 = "왼쪽 : 0px;"> <div> <img id = "img_1"src = "images/1.jpg"> </div> <div> <img src = "images/2.jpg"> </div> <div> <img src = "images/3.jpg"> </div> <img src = "images/4.jpg"> 4.jpg "> src = "images/5.jpg"> </div> <div> <img src = "images/6.jpg"> </div> </div> <div> <span id = "perv_btn"> </div> <div> <div> <div> <div> <div> <div> <div> <div> <spat id = "span </div> </div> </div> <span id ="next_btn "> id = "show_small"> <ul> <li> <img src = "images/thumbs/1.jpg"> </li> <li> <img src = "images/thumbs/2.jpg"> </li> <li> <img src = "images/thumbs/3.jpg"> <li> <img src = "이미지/4.JP"> <li> <img src = "이미지/썸/5.jpg"> </li> <li> <img src = "images/thumbs/6.jpg"> </li> </ul> </div> </div> </div> </div> </div>
CSS 코드 (직접 읽으십시오) :
* {마진 : 0; 패딩 : 0; } html, body, .container {너비 : 100%; 높이 : 100%; Font-Family : 'Microsoft Yahei'; } .Container {배경색 : #222; 오버 플로우 -X : 숨겨진; } .Container H1 {font-size : 50px; 색상 : #CCC; 텍스트 정렬 : 센터; 글꼴 체중 : 대담한; 높이 : 120px; 라인 높이 : 120px; } .wrap {위치 : 상대; 너비 : 600%; 높이 : 400px; 테두리 : 10px 고체 #333; 국경-바닥 : 10px 고체 #333; 마진-탑 : 20px; } .bg {위치 : 절대; 너비 : 100%; 높이 : 100%; 왼쪽 : 0; 상단 : 0; -webkit-transition : 모든 1s;-모조 전달 : 모든 1s; -ms-transition : 모두 1s; -o- 전달 : 모든 1s; -o- 전달 : 모든 1s; 전환 : 모두 1s; } .bg-1 {배경 : URL (images/bg1.png); } .bg-2 {배경 : URL (images/bg2.png); } .bg-3 {배경 : URL (images/bg3.png); } .wrap-panel {위치 : 절대; 너비 : 100%; 높이 : 100%; -webkit-transition : 모두 1s; -Moz-transition : 모두 1s; -ms-transition : 모두 1s; -O- 전달 : 모두 1s; 전환 : 모두 1s; } .panel {너비 : 16.66%; 높이 : 100%; 플로트 : 왼쪽; } .panel img {display : 블록; 여백 : 0 Auto; 마진-탑 : 35px; Border-Radius : 10px; 테두리 : 10px 고체 RGBA (143, 143, 143, 0.6); } .Navigation-Button Span : 호버 {불투명도 : 0.8} .perv-button, .next-button {위치 : 절대; 너비 : 30px; 높이 : 60px; 배경색 : #344133; Border-Radius : 10px; 커서 : 포인터; 불투명도 : 0.4; } .perv-button {배경 : #000 URL (images/prev.png) 센터 센터 No-Repeat; } .next-button {background : #000 URL (images/next.png) 센터 센터 센터 No-Repeat; } .show-small {위치 : 절대; 너비 : 680px; 하단 : 20px; } .show-small ul {List-Style : 없음; } .show-small ul li {float : 왼쪽; 여백 : 0 10px; 테두리 : 5px 고체 #fff; 불투명도 : 0.7; 커서 : 포인터; -webkit-transition : 모든 .3s; -Moz-transition : 모든 .3S; -ms-transition : 모든 .3s; -O- 전달 : 모든 .3S; 전환 : 모든 .3S; } .show-small ul li : 호버 {마진-탑 : -15px; }JS 코드 (작은 데모) :
window.onload = function () {// 요소를 가져옵니다 var getdom = function (id) {return typeof id === "String"? document.getElementById (id) : id; } // 객체를 가져옵니다 var img = getDom ( 'img_1'); var prev = getdom ( "perv_btn"); var next = getdom ( "next_btn"); var wrap_panel = getdom ( 'wrap_panel'); var bg_1 = getdom ( "bg_1"); var bg_2 = getdom ( "bg_2"); var bg_3 = getdom ( "bg_3"); var show_small = getdom ( "show_small"); var list = show_small.getElementsByTagName ( "li"); var width; // 요소 var addevent = function (id, event, fn) {var el = getdom (id) || 문서; if (el.addeventListener) {el.addeventListener (이벤트, fn, false); } else if (el.attachevent) {el.attachevent ( 'on' + event, fn); }} function init () {// 포워드 버튼의 왼쪽 거리 = 그림의 왼쪽 거리 + portle + border prev.style.left = img.offsetleft + 10 + 'px'; // 전방 버튼의 상단 거리 = 그림의 상단 거리 + 이미지 높이의 절반 - 버튼의 절반 이전 버튼 style.top = img.offsetTop + img.clientHeight/2- prev.ClientHeight/2 + 'px'; next.style.left = img.offsetleft + img.clientWidth + 10 -Next.ClientWidth + 'PX'; 다음.style.top = prev.style.top; // 작은 그림의 컨테이너를 wwidth = document.documentElement.clientWidth || document.body.clientWidth; show_small.style.left = (wwidth -show_small.clientwidth)/2 + 'px'; } // 작은 그림 처리 함수 small_img () {// 그림을 회전합니다 (var i = 0; i <list.length; i ++) {// direction = math.pow (-1, parseint (math.random ()*10)); list [i] .style = "transform : rotate (" + (math.random ()*20*direction) + "deg)"; } list [0] .style.opacity = 1; } function ontuble_one (el, num) {for (var i = 0; i <el.length; i ++) {el [i] .style.opacity = 0.7; } // console.log (num); el [num] .Style.opacity = 1; } // 브라우저가 확대되면 Window.onResize = function () {init (); } // 함수를 실행 init (); small_img (); addEvent (prev, 'click', function () {// 랩 패널의 왼쪽 var var var var var oldpos = parseint (wrap_panel.style.left); if (oldpos == 0) {// 배경 팬 그림 컨테이너 pan bg_1.style.left = bg_2.style.left = bg_3.style.left = wrap_panel.leftyle.left = wrap_panel.left = wrap_panel. -width*(list.length-1) + 'px'; 1)*100) + 'px'; Only_ONE (list, parseint (-(Oldpos/wwidth + 1))); addEvent (다음, 'click', function () {// 랩 패널 Oldpos의 왼쪽 var oldpos를 변경합니다. bg_1.style.left = bg_2.style.left = bg_3.style.left = wrap_panel.style.left = '0px'; bg_1.style.left = (Oldpos -Wwidth + parseint ( - (Oldpos/wwidth + 1)) + 'px'; parseint (-(Oldpos/wwidth + 1))*500) + 'px'; }위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.