이 기사의 예제는 참조를 위해 JS 다중 피크 왼쪽 및 오른쪽 전환 기능을 공유합니다. 특정 내용은 다음과 같습니다
생식 이미지 :
<html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-catsible"contment = "ie = edge"> <title> </title> <link rel = "스타일 시트" href = "http://static9.pplive.cn/pub/flagment/v_20150114110035/header.min.css"/> <!-페이지 초기화 CSS 및 페이지 공통 헤더 CSS-> <style type = "text/css"> @charset "utf-8"; HTML, 바디 {배경색 : #f6f5f5; } .vg-body {너비 : 1390px; 여백 : 0 Auto; } /*작업 성장 값* / .vg_title {font-size : 24px; 라인 높이 : 24px; 패딩 : 20px 0; 색상 : #464646; } .vg_task {배경색 : #fff; 위치 : 상대; } .vg_task .Arrowbtn-left, .vg_task .Arrowbtn-right {위치 : 절대; 상단 : 70px; 너비 : 16px; 높이 : 20px; 커서 : 포인터; } .vg_task .Arrowbtn-left {왼쪽 : 40px; 테두리 : 1px 솔리드 레드; 배경 : URL (../ 이미지/화살표-왼쪽 .png) 비 반복; ; } .vg_task .Arrowbtn-right {오른쪽 : 40px; 테두리 : 1px 솔리드 레드; 배경 : url (../ images/arrow-right.png) no-repeat; ; } .vg_taskList {너비 : 1200px; 오버플로 : 숨겨진; 여백 : 0 Auto; } .vg_tasklist ul {너비 : 999%; } .vg_tasklist li {너비 : 258px; 높이 : 130px; 플로트 : 왼쪽; 국경 : 1px 고체 #C8C8C8; 여백 : 15px 53px 15px 0; 위치 : 상대; } .vg_tasklist li .task_hover {위치 : 절대; 왼쪽 : -1px; 상단 : -1px; 너비 : 212px; 패딩 : 20px 25px 20px 23px; 높이 : 90px; 국경 바닥 : 2px 고체 #e65a5a; 오버플로 : 숨겨진; 배경색 : #f0f0f0; 디스플레이 : 없음; } .vg_tasklist li : hover .task_hover {display : block; } .task_hover .task_desc {font-size : 16px; 라인 높이 : 20px; 색상 : #646464; } .task_hover .task_limittimes {font-size : 14px; 색상 : #787878; 플로트 : 왼쪽; 패딩 탑 : 12px; } .vg_tasklist li img {float : 왼쪽; 여백 : 22px 8px 20px 20px; } .vg_tasklist li. rightinfo {너비 : 136px; 플로트 : 왼쪽; 텍스트 정렬 : 센터; }. rightinfo h3 {font-size : 16px; 색상 : #646464; 패딩 탑 : 15px; }. rightinfo p {font-size : 14px; 라인 높이 : 26px; 색상 : #787878; }. rightinfo a, .task_hover a {display : block; 텍스트 정렬 : 센터; 너비 : 96px; 높이 : 30px; 라인 높이 : 30px; 국경 : 2px 고체 #e65a5a; Border-Radius : 5px; 글꼴 크기 : 16px; 글꼴 중량 : 700; 색상 : #e65a5a; } .task_Hover A.DONE, .TASK_HOVER A.DONE : 호버 {배경색 : #B4B4B4; 색상 : #fff; 국경 색상 : #B4B4B4; 커서 : 기본값; }. rightinfo a {마진 : 12px auto 0; } .task_hover a {float : right; 마진-탑 : 18px; 마진 오른쪽 : -4px; } .task_Hover A : 호버 {텍스트-결정 : 없음; 배경색 : #e65a5a; 색상 : #fff; } /*그리드 -1230* / .grid-1230 .vg-body {너비 : 1210px; } .grid-1230 .vg_tasklist {너비 : 1090px; } .grid-1230 .vg_tasklist li {margin-right : 16px; } .grid-1230 .vg_task .Arrowbtn-left {왼쪽 : 33px; } .grid-1230 .vg_task .Arrowbtn-right {오른쪽 : 33px; } .grid-1230 .vg_growth_table {패딩 : 24px 30px; } .grid-1010 .vg-body {너비 : 990px; } .grid-1010 .vg_tasklist {너비 : 850px; } .grid-1010 .vg_tasklist li {margin-right : 35px; } .grid-1010 .vg_task .Arrowbtn-left {왼쪽 : 30px; } .grid-1010 .vg_task .Arrowbtn-right {오른쪽 : 30px; } .grid-1010 .vg_growth_table {패딩 : 24px; } </style> <!-추가 스타일 CSS, 특정 요구에 따라 이름을 수정할 수 있습니다 .-> <script src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> <cript> window.onresize = function () {var winwidth = document.body.clientwidth. if (winwidth <= 1230) {body.classname = "grid-1010"; } else if (winwidth <= 1410) {body.classname = "grid-1230"; } else if (winwidth> 1410) {body.classname = "grid-1410"; } else {alert ( "모르겠다!"); }} </script> </head> <body id = "body"> <cript> // 상태 디스플레이 스타일 판단 초기화, 본문 var winwidth = document.body.clientWidth; if (winwidth <= 1230) {body.classname = "grid-1010"; } else if (winwidth <= 1410) {body.classname = "grid-1230"; } else if (winwidth> 1410) {body.classname = "grid-1410"; } else {alert ( "모르겠다!"); } </script> <div> <!-작업 성장 가치 시작-> <div> <p> 작업 성장 가치 </p> </div> <div> <div> </div> </div> <div> <ul id = "switchpic"> <li> <img src = "images/task_year.png"> <h3> 개방형 멤버십 </h3> value <span> 200 </span> points </p> <a href = "javaScript :;"> 완료> </a> </a> </a> </a> </a> </div> <div> <p> 한 번에 연간 멤버십을 열어야합니다 (12 개월 이상) </p> <p> 월간 한계 <span> 1 </span> times </p> <a href = "javascript :; src = "images/task_lianxubaoyue.png"> <div> <h3> 연속 월간 구독 개방 </h3> <p> 보상 성장 가치 <Span> 10 </span> </p> <a href = "javaScript :;"> 완료> </a> <p> 연간 회원 </p <P). <Span> 1 </p> </p> <a href = "javaScript :;"> 완료로 이동> </a> </div> </li> <img src = "images/task_year.png"> <div> <h3> SVIP </h3> <p> REWARD 성장 값 업그레이드 </p point> </p> <a. href = "javaScript :;"> 완료> </a> </a> </a </div> <p> 한 번에 연간 회원을 열어두고 있습니다 (12 개월 이상) </p> <p> 월간 한도 </p> 시간 </p> <a href = "javascript :;"> a </p> </p> <p> 연례 멤버십 1 위입니다. <p> 월간 한계 <Span> 1 </span> 시간 </p> <a href = "javaScript :;"> 완료로 이동> </a> </div> </li> <li> <img src = "images/task_year.png"> <div> <h3> wechat 공식 설명 </h3> <p> 보상 </span> 10 </spac> href = "javaScript :;"> 완료로 이동> </a> </a> </div> <div> <p> 한 번에 연간 멤버십을 열어야합니다 (12 개월 이상) </p> <p> 월간 제한 <Span> 1 </span> Times </p> <a href = "javaScript :;"> 완료> </li> <li> <li> <li> src = "images/task_year.png"> <div> <h3> 작업 555555555 </h3> <p> 보상 성장 값 <span> 10 </span> point </p> <a href = "javaScript :;"> 완료> </a> </div> <p> 한 달에 연간 멤버십을 개방합니다 (12 개월 및 그 이상). <Span> 1 </p> </p> <a href = "javaScript :;"> 완료> </a> </a> </a> </li> <li> <img src = "images/task_year.png"> <div> <h3> 작업 666666666 </h3> <p> reward value <span> 10 </p> <a. href = "javaScript :;"> 완료> </a> </a> </a <div> <p> 한 번에 연간 회원 자격을 열어두기 (12 개월 이상) </p> <p> 월간 한도 <Span> 1 </p> </p> <a href = "javaScript :;"> 완료> </li> <li> <li> <li> <li> <li> src = "images/task_year.png"> <div> <h3> task7777777 </h3> <p> 보상 성장 값 <span> 10 </span> point> point </p> <a href = "javaScript :;"> </a> </div> <div> <p> 한 번에 연간 멤버십을 열어야합니다 (12 개월 및 그 이상). <Span> 1 </p> </p> <a href = "javaScript :;"> 완료> </a> </a> </a> </a> </a div> <div> <p> 한 번에 연간 멤버십을 열어야합니다. </div> <!-작업 성장 값 종료-> </div> </body> <cript> // 작업 성장 var switchpic = (function () {/*현재 : 현재 몇 개의 라일 늄이 얼마나 많은지 : 총 : LISH_LI : li width marginr_li : li right margin*/var var linum, w_li, w_li, vargome, w_li. 랩; O) {// 다음에 대한 hide (); $ ( "li"). if ( "#body") parseint ( "li"). css ( "marginright"); parseint ( "li"). css ( "marginright"); parseint ( "li"). }); }); ut return {init : init}} (); switchpic.init ({prebtn : $ ( ". Arrowbtn-left"), nextbtn : $ ( ". Arrowbtn-right"), 랩 : $ ( "#switchpic")); </script> </html>위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.