1. فلاش كاروسيل
بغض النظر عن الوصف ، فإن التنفيذ بسيط نسبيًا والتأثير أفضل
2
رمز HTML التالي هو مثال (انتقاد يسار)
<div style = "overflow: hidden ؛ width: 266px ؛"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </vif>
رمز المصدر المكون الإضافي: أدرك الدوران الأيسر والأعلى ، يتم أيضًا ترك التبديل اليدوي أيضًا (التبديل اليدوي لرمز مصدر المفتاح)
var all = $ panel.find ('> li') ، prevall = new array () ؛ prevall [0] = all.eq (0) ؛ // حفظ جميع العقد أمام العقدة الهدف في prevall ، وبعد انتهاء الرسوم المتحركة ، تتم إضافة هذه العقد إلى الجزء الخلفي من الحاوية واحدة تلو الأخرى (var i = 1 ؛ i <len ؛ i ++) {all. 'لا أحد'})؛ prevall [i] = all.eq (i) ؛} ... $ panel.animate ({'marginleft': -options.width+'px'} ، Options.duration ، function () {for (var i = 0 ؛ i <prevall.length ؛ i ++) {$ panel.append ($ (revall [i]) عرض عقدة إلى آخر $ panel.css ({marginleft: 0}) ؛})هناك طريقتان رئيسيتان لتنفيذ كارويلز انزلاق
1) قم بتبديل هامش العنصر الأصل-وأضف باستمرار العنصر الطفل الأول إلى نهاية الحاوية الأصل
تنفيذ بسيط
var $ panel = $ ('example') ؛ var scrolltimer = setInterVal (function () {scrollnews ($ panel) ؛} ، 3000) ؛ function $ scrollnews () {$ panel.animate ({'marginleft': '-266px'} ، 500 ، function () {{{{{marginleft: 0 }).تتمثل إحدى المشكلات في هذا النهج في أنه قد تكون هناك مشكلات توافق في IES القديمة.
2) اضبط هامش العنصر الأصل في طريقة التراكم
ومع ذلك ، عندما يتم ضبط الهامش اليسرى على الحد الأدنى (شريحة إلى العنصر الأخير) ، قم بتعيين موضع العنصر الأول للطفل في الجزء الخلفي من العنصر الأخير. عندما يتم تمرير العنصر الأخير إلى العنصر الأول ، يتم تعيين الهامش العنصر الأصل على 0 إلى 0 ويتم إرجاع موضع العنصر الطفل الأول. إعطاء مثال رمز بسيط
var $ panel = $ ('. مثال') ، index = 0 ؛ var scrolltimer = setInterval (function () {scrollnews ($ panel) ؛} ، 3000) ؛ function scrollnews () {if (++ index> = 2) {$ panel.css ({'paddingleft': 266+'px'}) $ ( "الموضع": "المطلق" ، "اليسار": 266*index + 'px'}) ؛ } $ panel.animate ({'marginleft': -266*index+'px'} ، 500 ، function () {if (++ index> 3) {$ panel.css ({marginleft: 0}) ؛} if (index> = 3) {$ ؛ $ panel.css ({marginleft: 0 ، $ panel.find ('> li: first').تحتاج المكونات الإضافية للتمرير الأكثر تعقيدًا إلى دعم التمرير الأفقي والرأسي (أربعة اتجاهات) ، ويمكنها تبديل التركيز يدويًا ، ويمكن أن يحضر لأعلى ولأسفل. قم بإرفاق رمز مصدر المكون الإضافي الكامل الذي كتبته
رمز المصدر المكون الإضافي jquery.nfdscroll.js: يدعم التمرير الأفقي والعمودي (أربعة اتجاهات). سوف يدوي التبديل اليدوي مع اتجاه التبديل.
/** * Author 'Chen Hua' * date '2016-5-10' * description sliding carousel plug-in ، يدعم carousel أفقي وعمودي * * example html: <iv> <! href = "xxx" target = "_ blank"> </a> </li> <li> <li> <a href = "xxx" target = "_ blank"> </a> </li> <li> <a href = "xxx" target = "_ blank"> </li> </ul> </li> <li> </li> <li> </li> <li> </li> </ol> <!-سابقًا و التالي ، اختياري-> <div> <a href = "javaScript: void (0) ؛ StartIndex: 0 ، العرض: "266" ، الارتفاع: "216" ، الفاصل الزمني: 2000 ، محدد: "Circle" ، PrevText: '' ، NextText: '' ، deriction: 'Left' ، callback: function (index ، $ currentNode) {console.log (index)}}) ؛ * param startIndex {number} التمرير من عدد عناصر التمرير بشكل افتراضي ، اختياري (0-n ، 0 يعني الأول ، الافتراضي هو 0) {number} وقت الفاصل الزمني ، الوحدة milliseconds ، عندما تكون القيمة سلبية ، لا يتم إجراء تمرير تلقائي * param مدة {number} مدة الرسوم المتحركة * param محددة {string} scroll togroll togon (قائمة التركيز) class class * param deriction {string}. انزلاق الرسوم المتحركة ، والمعلمات (الفهرس ، $ currentnode) ، الفهرس: فهرس العقدة المعروضة بعد carousel ؛ CurrentNode: كائن jQuery للعقدة المعروضة حاليًا بعد carousel * param prevtext {string} نص الزر السابق ، الافتراضي هو "السابق" * param nextText {string} نص الزر التالي ، الافتراضي هو "التالي" */ jquery.fn.extend ( 0 ، // عرض عنصر التمرير ، اختياري (عندما يكون العرض 0 يعني أنه لا يوجد عرض) الارتفاع: 0 ، // ارتفاع عنصر التمرير ، اختياري (عندما يكون الارتفاع 0 يعني عدم تعيين الطول) الفاصل الزمني: 1000 ، // الفاصل الزمني millisonds المدة: القادمة ،//مدة الرسوم المتحركة. deriction: 'Left' ، // scroll direction callback: function (index ، $ currentnode) {// trigger مباشرة بعد التمرير إلى عقدة جديدة ، فإن CurrentNode هو كائن jQuery الخاص بالعقدة المعروضة حاليًا}} ، $ this = this ، $ panel = $ this.find ('> ul') ، // scroll $ container = $ this.find ('> ol> li') ، // حدد خيارات الحاوية = jQuery.Extend (افتراضي ، خيارات) ، enimatefn ، // scroll simplication max = $ panel.find ("> li"). يتم الرد على الرسوم المتحركة أثناء عملية الرسوم المتحركة iswaiting = كاذبة ، هل هناك أي فهرس انتظار انتظار غير متوقع ؛ إذا كان ($ panellist.length <= 1) {return ؛ stopscroll () ؛ } ، Options.Interval) ؛ ClearInterval (nfdscrolltimer) ؛ }} if (toindex! = focusIndex) {inanimation = true ؛ "المطلقة" ، "اليسار": الخيارات "px '}) ؛ "px '} ، function () {focusIndex = tind ؛ 0) {// $ panel.css ({'marginleft': -options.width*focusIndex + 'PX' ، 'Paddingleft': 0}) ؛ inanimation = false ؛ FocusIndex) {inanimation = true ؛ }) ؛ TOINDEX ؛ if (toindex> = max) {$ panel.css ({margintop: 0 ، 'paddingtop': 0}) ؛ "Margintop": -EPTIONS. ) }). على ("انقر فوق" init () {$ this.css ({الموضع: 'النسبية' ، verflow: 'Hidden'}) ؛ == 'right') {// تهيئة النمط ، في الواقع ، يجب عدم إجراء النمط في المكون الإضافي. } length = $ panel.find ('> li'). css (csso). length ؛ 'Bottom') {var csso = {height: Options.Height} $ this.css ({height: Options.Height}) ؛ + px '،' margintop ' startCroll}}}) ؛مثال كامل
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> اختبار carousel </title> <style type = "text/css" ، ul ، ol {margin: 0 ؛ padding: 0 ؛} ul ، ol {style-style: none ؛} .li1 {background-color: #000 ؛} .li2 {background-color: #333 ؛} .li3 {background-color: #666 ؛} .li4 {background-color: #999 ؛} .example {margin-left: 300px ؛}. حشو اليسار: 80 بكسل ؛ العرض: 186 بكسل ؛ الارتفاع: 20 بكسل ؛ أعلى: 186 بكسل ؛ اليسار: 0px ؛ الخلفية: #fff ؛ المؤشر: مؤشر. } ol li {float: left ؛ العرض: 10px ؛ الارتفاع: 10 بكسل ؛ الهامش: 5px ؛ الخلفية: #ff0 ؛ الحدود الحدودية: 10px ؛ } ol li.circle {background: #f00 ؛ } </style> </head> <body> <viv> <!-scroll content ul-> <ul> <li> <a href = "xxx" target = "_ blank"> </a> </li> <li> <li> <a href = "xxx" target = "_ blank"> </li> <li> <li> <a href = "xxx" target = "_ blank"> </a> </li></ul> <!-قائمة التركيز ، اختياري-> ol> <li> </li> <li> </li> <li> </li> <li> </li> </li> </li> <! href = "javaScript: void (0) ؛"> </a> <a href = "javaScript: void (0) ؛"> </a> </viv> </viv> <script type = "text/javaScript" src = "common/jQuery.js src = "common/jquery.nfdscroll.js"> </script> <script type = "text/javaScript"> $ ('. Callback: function (index ، $ currentNode) {console.log (index)}}) ؛ </script> </body> </html>الآثار التي تحققت
اضبط أنماط OL و NFDSCROLL-PREV يدويًا.
طريقة التنفيذ البسيطة لل carousel أعلاه هي كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.