1. ม้าหมุนแฟลช
โดยไม่คำนึงถึงคำอธิบายการใช้งานนั้นค่อนข้างง่ายและเอฟเฟกต์จะดีกว่า
2. ม้าหมุนเลื่อน
รหัส HTML ต่อไปนี้เป็นตัวอย่าง (กวาดซ้าย)
<div style = "overflow: hidden; width: 266px;"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div>
ซอร์สโค้ดปลั๊กอิน: ตระหนักถึงการหมุนซ้ายและขึ้น
var all = $ panel.find ('> li'), preval = new Array (); prevall [0] = all.eq (0); // บันทึกโหนดทั้งหมดที่อยู่ด้านหน้าของโหนดเป้าหมายลงใน prevall และหลังจากภาพเคลื่อนไหวสิ้นสุดโหนดเหล่านี้จะถูกเพิ่มเข้าไปในคอนเทนเนอร์ 'ไม่มี'}); prevall [i] = all.eq (i);} ... $ panel.animate ({'marginleft': -options.width+'px'}, ตัวเลือก, การจัดงาน, ฟังก์ชั่น () {สำหรับ (var i = 0; i <prevall.length; แสดงโหนดไปยังสุดท้าย} $ panel.css ({marginleft: 0});})มีสองวิธีหลักในการใช้ม้าหมุนเลื่อน
1) สลับส่วนขอบองค์ประกอบหลักและเพิ่มองค์ประกอบลูกแรกอย่างต่อเนื่องไปที่ส่วนท้ายของคอนเทนเนอร์หลัก
การใช้งานอย่างง่าย
var $ panel = $ ('ตัวอย่าง'); var scrolltimer = setInterval (ฟังก์ชัน () {scrollNews ($ panel);}, 3000); ฟังก์ชั่น $ scrollNews () {$ panel.animate ({'marginleft': '-266px'}, 500, ฟังก์ชั่น () }) ค้นหา ('> li: first'). ภาคผนวก ($ panel);})}ปัญหาหนึ่งของวิธีการนี้คืออาจมีปัญหาความเข้ากันได้กับ IEs เก่า
2) ตั้งค่าส่วนขอบองค์ประกอบหลักในวิธีการสะสม
อย่างไรก็ตามเมื่อกำหนดระยะขอบซ้ายเป็นค่าต่ำสุด (เลื่อนไปยังองค์ประกอบสุดท้าย) ให้ตั้งตำแหน่งขององค์ประกอบลูกแรกที่ด้านหลังขององค์ประกอบลูกสุดท้าย เมื่อองค์ประกอบสุดท้ายถูกเลื่อนไปยังองค์ประกอบแรกองค์ประกอบส่วนขอบแม่แม่จะถูกตั้งค่าเป็น 0 และตำแหน่งขององค์ประกอบลูกแรกจะถูกส่งคืน ให้ตัวอย่างโค้ดง่ายๆ
var $ panel = $ ('. ตัวอย่าง'), index = 0; var scrollTimer = setInterval (function () {scrollNews ($ panel);}, 3000); ฟังก์ชั่น scrollNews () {ถ้า (++ ดัชนี> = 2) {$ panel.css ({paddingleft ': 266 'ตำแหน่ง': 'สัมบูรณ์', 'ซ้าย': 266*ดัชนี + 'px'}); } $ panel.animate ({'marginleft': -266*index+'px'}, 500, function () {ถ้า (++ ดัชนี> 3) {$ panel.css ({marginleft: 0});} ถ้า (ดัชนี> = 3) {index = 0; $ panel.find ('> li: first'). css ({'ตำแหน่ง': 'คงที่', 'ซ้าย': 'auto'});}})}ปลั๊กอินการเลื่อนที่ซับซ้อนมากขึ้นจำเป็นต้องรองรับการเลื่อนในแนวนอนและแนวตั้ง (สี่ทิศทาง) สามารถสลับโฟกัสด้วยตนเองและสามารถเปิดและลงได้ แนบซอร์สโค้ดปลั๊กอินที่สมบูรณ์ที่ฉันเขียน
ปลั๊กอินซอร์สโค้ด jQuery.nfdscroll.js: รองรับการเลื่อนในแนวนอนและแนวตั้ง (สี่ทิศทาง) การสลับด้วยตนเองจะเลื่อนไปตามทิศทางการสลับ
/** * @author 'Chen Hua' * @date '2016-5-10' * @description Sliding Carousel Plug-in รองรับการหมุนแนวนอนและแนวตั้ง Carousel * * @example html: <div> <! href = "xxx" target = "_ blank"> </a> </li> <li> <a href = "xxx" target = "_ blank"> </a> </li> <li> <a href = "xxx" target = "blank"> </a> </li> <li> </li> <li> </li> <li> </li> </ol> <!-ก่อนหน้าและถัดไปตัวเลือก-> <div> <a href = "JavaScript: void (0);"> </a> <a href = "JavaScript: void (0);"> </a> startIndex: 0, ความกว้าง: '266', ความสูง: '216', Interval: 2000, เลือก: 'Circle', Prevtext: '', NextText: '', deriction: 'ซ้าย', callback: ฟังก์ชั่น (ดัชนี, $ currentNode) {console.log (ดัชนี)}}); * @param startIndex {number} การเลื่อนจากจำนวนองค์ประกอบการเลื่อนตามค่าเริ่มต้น, ตัวเลือก (0-n, 0 หมายถึงอันแรกค่าเริ่มต้นคือ 0) * @param width {number} ความกว้างองค์ประกอบการเลื่อน, เป็นทางเลือก (เมื่อความกว้าง 0 หมายถึงไม่มีความกว้าง) ช่วงเวลา, หน่วยมิลลิวินาทีเมื่อค่าเป็นลบไม่มีการเลื่อนอัตโนมัติจะดำเนินการ * @param ระยะเวลา {หมายเลข} ระยะเวลาการเคลื่อนไหว * @param เลือก {สตริง} ม้วนไอคอนเล็ก ๆ พารามิเตอร์ (ดัชนี, $ currentNode), ดัชนี: ดัชนีของโหนดที่แสดงหลังจากม้าหมุน; currentNode: วัตถุ jQuery ของโหนดที่แสดงในปัจจุบันหลังจาก Carousel * @param prevtex {string} ข้อความของปุ่มก่อนหน้า, ค่าเริ่มต้นคือ "ก่อนหน้า" * @param nexttext {String} ข้อความของปุ่มถัดไปคือ "next" */jQuery.fn.extend ({nfdscroll ความกว้างตัวเลือก (เมื่อความกว้างคือ 0 หมายถึงไม่มีการตั้งค่าความกว้าง) ความสูง: 0, // ความสูงขององค์ประกอบการเลื่อน, ตัวเลือก (เมื่อความสูงคือ 0 หมายถึงไม่มีการตั้งค่าความสูง) ช่วงเวลา: 1000, // ช่วงเวลามิลลิวินาทีช่วงเวลา: 400, // ช่วงเวลาที่เลือก ' การโทรกลับ: ฟังก์ชั่น (ดัชนี, $ currentNode) {// ทริกเกอร์ทันทีหลังจากเลื่อนไปที่โหนดใหม่ CurrentNode เป็นวัตถุ jQuery ของโหนดที่แสดงในปัจจุบัน}}, $ this = this, $ panel = $ this.find ('> ul'), // sclollist) = jQuery.extend (defaultOpt, ตัวเลือก), animatefn, // scroll animation max = $ panel.find ("> li"). ความยาว, // จำนวนโหนดที่จะเลื่อนโฟกัสโฟกัส = 0, // ดัชนีของ nfdscrolltimer = 0 FALSE, // มีดัชนีการรอแอนิเมชั่นที่ไม่ได้รับการแก้ไขใด ๆ // ดัชนีเป้าหมายของภาพเคลื่อนไหวรอที่ไม่ได้รับการดูแล $ ('. NFDSCROLL-PREV') ข้อความ (ตัวเลือกการ prevText); เสร็จสิ้น แต่โฟกัสได้รับการเปลี่ยนไปยังสถานที่ต่อไป toindex; return; // ไม่มีการตอบสนองต่อระหว่างกระบวนการเคลื่อนไหว}} {iswaiting = false; animefn (toindex); ไปยังฟังก์ชั่นดัชนีที่ระบุ leftrightanimate (toindex) {// วิธีการเลื่อนเริ่มต้นถ้า (toindex == undefined) {ถ้า (ตัวเลือกการทำงาน == 'ซ้าย') {toindex = focusindex + 1; 0; ถ้า (toindex> = max) {// เมื่อภาพสุดท้ายยังคงเลื่อน $ panel.css ({'paddingleft': ตัวเลือก 0) {// เฉพาะเมื่อภาพปัจจุบันเป็นภาพแรกจากนั้นคลิกที่ภาพก่อนหน้า // การประมวลผลเมื่อกระแสไฟฟ้าเป็นเงินหมุนรอบสุดท้าย $ panellist.eq (สูงสุด - 1) $ selectList.filter ('.' + opotions.Selected) .removeClass (ตัวเลือกที่เลือก) .END (). EQ (tind) .AddClass (ตัวเลือกที่เลือก); สูงสุด) {// $ panel.css ({'marginleft': 0, 'paddingleft': 0}); 'px', 'paddingleft': 0}); topbottomanime (toindex) {// วิธีการเลื่อนเริ่มต้นถ้า (toindex == undefined) {ถ้า (ตัวเลือกที่เป็นตัวเลือก == 'top') {toindex = focusinde > = max) {$ panel.css ({'paddingtop': ตัวเลือก height + 'px'}) $ panellist.eq (0) .css ({'ตำแหน่ง': 'Absolute', 'top': ตัวเลือก*toindex + 'px'}; รูปภาพก่อนหน้า // การประมวลผลเมื่อกระแสเป็นม้าหมุนสุดท้าย $ panellist.eq (สูงสุด - 1) .css ({'ตำแหน่ง': 'สัมบูรณ์', 'top': -options.height + 'px'}); ตัวเลือกที่ได้รับการคัดเลือก) .removeClass (ตัวเลือกที่เลือก) .end (). eq (tind) .AddClass (ตัวเลือกที่เลือก); 0, 'paddingtop': 0}); $ panellist.eq (0) .css ({'ตำแหน่ง': 'คงที่', 'top': 'auto'}); 'paddingtop': 0}); $ this.on ('mouseover', function () {stopscroll ();}). on ('mouseout', function () {startCroll ();}). on ('คลิก', '.nfdscroll-prev', ฟังก์ชั่น () {{stopscroll (stopscroll (stopscroll ( StopScroll (); 'hidden'}); $ panel.css ({ตำแหน่ง: 'ญาติ'}) focusIndex = ตัวเลือก startindex; // เลื่อนจาก startindex โดยค่าเริ่มต้น $ selectlist.eq (focusIndex) .AddClass ปลั๊กอิน $ panel.find ('> li'). CSS (CSSO) .length; CSSO = {ความสูง: ตัวเลือก height} $ this.css ({ความสูง: ตัวเลือก height}); // เพียงแค่ต้องการความสูงของท่อถ้า (ตัวเลือก. 'px', 'margintop': -ptions.height*FocusIndex + 'PX'}); StartsCroll}}});ตัวอย่างที่สมบูรณ์
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> ตัวอย่างการทดสอบม้าหมุน </title> Padding: 0;} ul, ol {list-style: none;} .li1 {พื้นหลัง-สี: #000;} .li2 {พื้นหลัง-สี: #333;} .Li3 {พื้นหลังสี: #666; ตำแหน่ง: สัมบูรณ์; Padding-Left: 80px; ความกว้าง: 186px; ความสูง: 20px; ด้านบน: 186px; ซ้าย: 0px; ความเป็นมา: #FFF; เคอร์เซอร์: ตัวชี้; } ol li {float: ซ้าย; ความกว้าง: 10px; ความสูง: 10px; มาร์จิ้น: 5px; ความเป็นมา: #ff0; แนวชายแดน: 10px; } ol li.circle {พื้นหลัง: #f00; } </style> </head> <body> <div> <!-Scroll Content Ul-> <ul> <li> <a href = "xxx" target = "_ blank"> </a> </li> <li> <a href = "xxx" target = "blank"> </a> <li> <a href = "xxx" target = "_ blank"> </a> </li></ul> <!-รายการโฟกัสเป็นทางเลือก-> <ol> <li> </li> <li> </li> <li> </li> <li> </li> href = "javascript: void (0);"> </a> <a href = "javascript: void (0);"> </a> </vive> </div> <script type = "text/javascript" src = "Common/jquery.js"> </script> src = "Common/jQuery.nfdscroll.js"> </script> <script type = "text/javascript"> $ ('. ตัวอย่าง'). nfdscroll ({startIndex: 0, ความกว้าง: '266', ความสูง: '216' ฟังก์ชั่น (ดัชนี, $ currentNode) {console.log (ดัชนี)}}); </script> </body> </html>ผลที่ได้รับ
ปรับรูปแบบของ OL, NFDSCROLL-PREV ฯลฯ ด้วยตนเอง
วิธีการใช้งานอย่างง่ายของม้าหมุนข้างต้นคือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น