ตัวอย่างในบทความนี้แบ่งปันฟังก์ชั่นการสลับของ JS Multi-Picture ซ้ายและขวาสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
ภาพการทำซ้ำ:
<html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua เข้ากันได้" content = "ie = edge"> <title> </title> <link rel = "stylesheet" href = "http://static9.pplive.cn/pub/flagment/v_20150114110035/header.min.css"/> <!-การเริ่มต้นหน้า CSS และหน้าส่วนหัวทั่วไป CSS-> html, body {พื้นหลังสี: #f6f5f5; } .vg-body {width: 1390px; มาร์จิ้น: 0 อัตโนมัติ; } /*ค่าการเติบโตของงาน* / .vg_title {font-size: 24px; ความสูงของสาย: 24px; Padding: 20px 0; สี: #464646; } .vg_task {พื้นหลังสี: #fff; ตำแหน่ง: ญาติ; } .vg_task .arrowbtn-Left, .vg_task .Arrowbtn-Right {ตำแหน่ง: สัมบูรณ์; ด้านบน: 70px; ความกว้าง: 16px; ความสูง: 20px; เคอร์เซอร์: ตัวชี้; } .vg_task .arrowbtn-Left {ซ้าย: 40px; ชายแดน: 1px ของแข็งสีแดง; ความเป็นมา: url (../ images/Arrow-left.png) ไม่ต้องทำซ้ำ - } .vg_task .arrowbtn-Right {ขวา: 40px; ชายแดน: 1px ของแข็งสีแดง; ความเป็นมา: URL (../ images/Arrow-right.png) ไม่ต้องทำซ้ำ - } .vg_tasklist {width: 1200px; ล้น: ซ่อน; มาร์จิ้น: 0 อัตโนมัติ; } .vg_tasklist ul {width: 999%; } .vg_tasklist li {width: 258px; ความสูง: 130px; ลอย: ซ้าย; ชายแดน: 1px Solid #C8C8C8; มาร์จิ้น: 15px 53px 15px 0; ตำแหน่ง: ญาติ; } .vg_tasklist li .task_hover {ตำแหน่ง: สัมบูรณ์; ซ้าย: -1px; ด้านบน: -1px; ความกว้าง: 212px; Padding: 20px 25px 20px 23px; ความสูง: 90px; ขอบด้านล่าง: 2px Solid #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; ลอย: ซ้าย; Padding-Top: 12px; } .vg_tasklist li img {float: ซ้าย; มาร์จิ้น: 22px 8px 20px 20px; } .vg_tasklist li. rightinfo {width: 136px; ลอย: ซ้าย; TEXT-ALIGN: CENTER; } .HIGHTINFO H3 {FONT-SIZE: 16PX; สี: #646464; Padding-Top: 15px; } .HIGHTINFO P {FONT-SIZE: 14PX; ระดับความสูง: 26px; สี: #787878; }. rightInfo a, .task_hover a {display: block; TEXT-ALIGN: CENTER; ความกว้าง: 96px; ความสูง: 30px; ระดับความสูง: 30px; ชายแดน: 2px Solid #E65A5A; แนวชายแดน: 5px; ขนาดตัวอักษร: 16px; Font-Weight: 700; สี: #e65a5a; } .task_hover a.done, .task_hover a.done: โฮเวอร์ {พื้นหลังสี: #b4b4b4; สี: #FFF; สีชายแดน: #B4B4B4; เคอร์เซอร์: ค่าเริ่มต้น; }. rightInfo a {margin: 12px auto 0; } .task_hover a {float: ขวา; ขอบด้านบน: 18px; มาร์จิ้น -ขวา: -4px; } .task_hover A: Hover {Text-Decoration: None; พื้นหลังสี: #e65a5a; สี: #FFF; } /*grid-1230* / .Grid-1230 .vg-body {width: 1210px; } .Grid-1230 .vg_tasklist {width: 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 {padding: 24px 30px; } .Grid-1010 .vg-body {width: 990px; } .Grid-1010 .vg_tasklist {width: 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 {padding: 24px; } </style> <!-เพิ่มสไตล์ css ชื่อสามารถแก้ไขได้ตามความต้องการเฉพาะ-> <script src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> if (winwidth <= 1230) {body.className = "grid-1010"; } อื่นถ้า (winwidth <= 1410) {body.className = "grid-1230"; } อื่นถ้า (winWidth> 1410) {body.className = "grid-1410"; } else {Alert ("ไม่รู้!"); }} </script> </head> <body id = "body"> <script> // เริ่มต้นการตัดสินรูปแบบการแสดงผลสถานะวางไว้หลังจากร่างกาย var var winwidth = document.body.clientwidth; if (winwidth <= 1230) {body.className = "grid-1010"; } อื่นถ้า (winwidth <= 1410) {body.className = "grid-1230"; } อื่นถ้า (winWidth> 1410) {body.className = "grid-1410"; } else {Alert ("ไม่รู้!"); } </script> <div> <!-ค่าการเติบโตของงานเริ่มต้นขึ้น-> <div> <p> ค่าการเติบโตของงาน </p> </div> <div> <div> </div> </div> </div> <div> <ul id = "switchpic"> <li> <img src = "task_year.png" คะแนน </p> <a href = "JavaScript:;"> เสร็จสิ้น> </a> </div> <div> <p> เปิดสมาชิกประจำปีในครั้งเดียว (12 เดือนขึ้นไป) </p> <p> ขีด จำกัด รายเดือน <pan> 1 </span> ครั้ง </p> <a href = "javascript:" src = "images/task_lianxubaoyue.png"> <div> <h3> เปิดการสมัครสมาชิกรายเดือนอย่างต่อเนื่อง </h3> <p> ค่าการเติบโตของรางวัล <pan> 10 </span> คะแนน </p> <a href = "JavaScript:; <span> 1 </span> เวลา </p> <a href = "javascript:;"> ไปที่เสร็จสิ้น> </a> </div> </li> <li> <img src = "ภาพ/task_year.png"> <div> <h3> href = "javascript:;"> ไปที่เสร็จสิ้น> </a> </v> <div> <p> เปิดสมาชิกประจำปีในครั้งเดียว (12 เดือนขึ้นไป) </p> <p> ขีด จำกัด รายเดือน <pan> 1 </span> เวลา </p> <a href = "JavaScript:;" <p> ขีด จำกัด รายเดือน <Span> 1 </span> เวลา </p> <a href = "javaScript:;"> ไปที่เสร็จสิ้น> </a> </div> </li> <li> <img src = "ภาพ/task_year.png"> <h3> HREF = "JavaScript:;"> ไปที่เสร็จสิ้น> </a> </div> <div> <p> เปิดสมาชิกประจำปีในครั้งเดียว (12 เดือนขึ้นไป) </p> <p> ขีด จำกัด รายเดือน <pan> 1 </span> ครั้ง </p> <a href = "JavaScript:;" src = "images/task_year.png"> <div> <h3> ภารกิจ 555555555 </h3> <p> ค่าการเติบโตของรางวัล <pan> 10 </span> จุด </p> <a href = "Javascript:;" <span> 1 </span> เวลา </p> <a href = "JavaScript:;"> เพื่อให้เสร็จสมบูรณ์> </a> </div> </li> <li> <img src = "ภาพ/task_year.png"> <div> <h3> งาน 666666666 href = "javascript:;"> เสร็จสิ้น> </a> </v> <p> <p> เปิดสมาชิกประจำปีในครั้งเดียว (12 เดือนขึ้นไป) </p> <p> ขีด จำกัด รายเดือน <pan> 1 </span> เวลา </p> <a href = "JavaScript:;"> src = "images/task_year.png"> <div> <h3> task7777777 </h3> <p> ให้รางวัลค่าการเติบโต <span> 10 </pan> จุด </p> <a href = "JavaScript:;" <span> 1 </span> เวลา </p> <a href = "JavaScript:;"> เสร็จสิ้น> </a> </div> <div> <p> เปิดสมาชิกประจำปีในครั้งเดียว (12 เดือนขึ้นไป) </p> <p> Moon Limit <span> 1 </span> </div> <!-ค่าการเติบโตของงานสิ้นสุด-> </div> </body> <script> // การเจริญเติบโตของงาน var switchpic = (function () {/*ตอนนี้: ลิลลินัมมีจำนวนเท่าใด: ลิลลินัมจำนวนเท่าใด init (O) {pre = o.prebtn; {// เริ่มต้นเฉพาะ pre.hide (); $ ("#switchpic"). ค้นหา ("li"). size (); Offset = w_li + marginr_li; w_li + marginr_li; w_li+marginr_li;}} bindbtn () {btnshow (); btnshow (); switchpic.init ({prebtn: $ (". Arrowbtn-Left"), nextbtn: $ (". Arrowbtn-Right"), wrap: $ ("#switchpic")}); </script> </html>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น