في الفريق ، سُئل فجأة عن كيفية تنفيذ صور carousel. لقد كنت في الحقل الأمامي لأكثر من عام ، لكنني لم أكتبه بنفسي لفترة طويلة. لقد استخدمت دائمًا مكونًا إضافيًا لكتابته في Daniu. اليوم سأكتب برنامجًا تعليميًا بسيطًا مناسبًا للمبتدئين للتعلم. بالطبع ، هناك العديد من مبادئ التنفيذ وأنماط تصميم مخططات Carousel. ما أتحدث عنه هنا هو تنفيذها باستخدام البرمجة الوظيفية الموجهة نحو العملية. بالمقارنة مع أنماط التصميم الموجهة للكائنات ، سيظهر الكود حتماً متضخمًا ومتكررًا. لكن عدم وجود تجريد موجه نحو الكائن مناسب للغاية للمبتدئين لفهم والتعلم. يأمل الطلاب الموجودون بالفعل في الخفافيش في أن يخترق أقل. يمكنك أيضا تقديم المزيد من الاقتراحات.
مبدأ الرسم التخطيطي:
يتم تجريد سلسلة من الصور ذات الأحجام المتساوية ، باستخدام تخطيط CSS لعرض صورة واحدة فقط ، والباقي مخفي. يتم تحقيق التشغيل التلقائي عن طريق حساب الإزاحة باستخدام المؤقت ، أو تبديل الصور بالنقر يدويًا على الأحداث.
تخطيط HTML
أولاً ، تخزن حاوية الحاويات الأصل جميع المحتويات ، تحتوي قائمة حاويات الطفل على صور. أزرار الأزرار الفرعية المتجر.
<div id = "container"> <div id = "list" style = "left: -600px ؛"> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> <img src = "img/2.jpg"/> /> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> </viv> <div id = "buttons"> <span index = "1" <span index = "4"> </span> <span index = "5"> </span> </viv> <a href = "javaScript :؛" id = "prev"> <</a> <a href = "javaScript :؛" id = "next" >> </a> </viv>
تحسين ، تمرير سلس.
عندما تقوم بالتبديل من الصورة الأخيرة إلى الصورة الأولى ، توجد فجوة كبيرة ، واستخدم صورتين إضافيتين لملء هذه الفجوة.
فيما يلي تمرير سلس ، انظر إلى الكود مباشرة ، ونسخ الصورة الأخيرة قبل وضع الصورة الأولى ، ونسخ الصورة الأولى خلف الصورة الأخيرة. وإخفاء الصورة الأولى الصورة (في الواقع الصورة الخامسة المعروضة بالفعل ، لذا قم بتعيين style = "left: -600px ؛")
تعديل CSS
1. فهم نموذج مربع ، وتدفق المستندات ، وقضايا تحديد المواقع المطلقة.
2. انتبه إلى الفائض: مخفي القائمة ؛ عرض صورة للنافذة فقط وإخفاء الجانبين الأيسر واليمين.
3. تأكد من أن كل طبقة تمتد في الأزرار تتصدر وضبطها على الأعلى. (Z-index: 999)
* {margin: 0 ؛ padding: 0 ؛ text-decoration: none ؛} body {padding: 20px ؛}#container {width: 600px ؛ leight: 400px ؛ border: 3px solid#333 ؛ verdlow: hidden ؛ position ؛ expant ؛}#list {width: 4200px ؛ {العرض: 600px ؛ الارتفاع: 400px ؛ عطف: يسار ؛}#أزرار {الموضع: absilet ؛ الارتفاع: 10px ؛ العرض: 100px ؛ z-index: 2 ؛ القاع: 20px ؛ اليسار: 250px ؛}#الأزرار span 50 ٪ ؛ الخلفية: #333 ؛ الهامش اليمين: 5px ؛} #الأزرار. 180px ؛ خلفية اللون: rgba (0 ، 0 ، 0 ، .3) ؛ اللون: #fff ؛}JS
أولاً ، ندرك أولاً تأثير النقر يدويًا على الأسهم اليمنى واليسرى لتبديل الصورة:
window.onload = function () {var list = document.getElementById ('list') ؛ var prev = document.getElementById ('prev') ؛ var next = document.getElementById ('التالي') ليتم تقريبها مع parseint () لتحويله إلى رقم. var newleft = parseint (list.style.left) + Offset ؛ list.style.left = newleft + 'px' ؛} prev.onclick = function () {animate (600) ؛} next.onclick = function () {enimate (-600) ؛}}}}بعد الجري ، سنجد أنه إذا استمرت في النقر فوق السهم الأيمن ، فسيكون هناك فارغ ، ولا يمكنك العودة إلى الصورة الأولى. انقر فوق السهم الأيسر للعودة إلى الصورة الأولى.
باستخدام Google Chrome F12 ، والسبب هو أننا نستخدم الإزاحة اليسرى للحصول على الصورة. عندما نرى أن القيمة اليسرى أقل من 3600 ، ستكون هناك فارغة إذا لم تكن هناك صورة 8 ، لذلك نحتاج إلى إصدار حكم على الإزاحة هنا.
أضف هذه الفقرة إلى الوظيفة المتحركة:
if (newleft <-3000) {list.style.left = -600 + 'px' ؛} if (newleft> -600) {list.style.left = -3000 + 'px' ؛}حسنًا ، قم بتشغيله ، لا مشكلة. صور Carousel ، كما يوحي الاسم ، هي الصور التي يمكنك نقلها. في هذا الوقت ، نحتاج إلى استخدام مؤقت الكائن المدمج للمتصفح.
بالنسبة إلى الموقتات ، من الضروري شرح الفرق بين setInterval () و setTimeOut. ببساطة ، يتم تنفيذ setInterval () عدة مرات ، ويتم تنفيذ setTimeOut () مرة واحدة فقط.
لاستخدام أكثر تحديداً ، يمكنك النقر فوق الرابط لعرض الفرق: window.setInterval Window.SettImeout.
هنا نستخدم SetInterval () لأن صورتنا تحتاج إلى تمرير حلقة. أدخل أدناه
var timer ؛ function play () {timer = setInterval (function () {prev.onclick ()} ، 1500)} play () ؛ركض ، حسنا!
ومع ذلك ، عندما نريد أن ننظر بعناية إلى صورة معينة ، نحتاج إلى إيقاف الصورة ويمكننا فقط مسح المؤقت. يتم استخدام هذه الطريقة هنا.
هنا ، نحتاج إلى العمل على DOM ونحتاج إلى الحصول على منطقة خريطة Carousel بأكملها ؛
var container = document.getElementById ('Container') ؛ function stop () {clearinterval (timer) ؛} container.onmouseover = stop ؛ container.onmouseout = play ؛ولكن هنا ، تم الانتهاء من صورة دائرية بشكل أساسي ، وسيسأل بعض الطلاب ، لذلك فهي بسيطة للغاية. هل رأيت صف النقاط الصغيرة تحت الصورة؟ لقد أضفت ميزات لك.
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
هنا هي النسخة التي تمت ترقيتها:
var buttons = document.getElementById ('buttons'). getElementSyByTagName ('span') ؛ var index = 1 ؛ function buttonsshow () {// يجب مسح النمط السابق لـ (var i = 0 ؛ يبدأ الصفيف من 0 ، لذلك يحتاج الفهرس إلى -1buttons [الفهرس -1] .ClassName = 'on' ؛} prev.onclick = function () {index -= 1 ؛ if (index <1) {index = 5 ؛} buttonsshow () ؛ animate (600) ؛} next.onclick = function () ليس لدينا سوى 5 نقاط صغيرة ، لذلك نحن بحاجة إلى إنشاء فهرس الحكم += 1 ؛ إذا (الفهرس> 5) {index = 1 ؛} buttonsshow () ؛ ANIMATE (-600) ؛}يبدو الأمر أكثر طبيعية الآن ، لكننا نريد النقر على إحدى النقاط الصغيرة في أي وقت مع الماوس والتبديل إلى الصورة المقابلة. نفس المبدأ هو ، ما زلنا بحاجة إلى العثور على الصورة المقابلة من خلال الإزاحة.
لـ (var i = 0 ؛ i <buttons.length ؛ i ++) {buttons [i] .onclick = function () {// enspize ، انقر فوق النقطة الحالية في الصورة الحالية ولا تنفذ الرمز التالي. إذا كان (this.className == "on") {return ؛}/* get: هنا تحصل على الموضع الذي ينتقل فيه الماوس إلى النقطة ، استخدم هذا لربط الفهرس بأزرار الكائن [i] ، انتقل إلى Google هذا الاستخدام* //* لأن الفهرس هنا هو سمة مخصصة ، فأنت بحاجة إلى استخدام طريقة dom2 على مستوى dom2 () parseint (this.getAttribute ('index')) ؛ var roffset = 600 * (clickIndex - index) ؛ animate (الإزاحة) ؛الجميع ، ربما اكتشفت أن هذه الصورة الكاروسيل غريبة بعض الشيء ولا يمكن التنبؤ بها. يتحول إلى اليسار ، لذا أعد كتابته:
وظيفة play () {// تبديل صورة carousel لتبديل الصورة إلى المؤقت الأيمن = setInterval (function () {next.onclick () ؛} ، 2000)} <! doctype html> 0 ؛ تكرار النص: لا شيء ؛} الجسم {padding: 20px ؛}#حاوية {العرض: 600px ؛ الارتفاع: 400px ؛ الحدود: 3px solid#333 ؛ overflow: hidden ؛ الموضع: related ؛}#list 400px ؛ float: left ؛} #buttons {الموضع: المطلق ؛ الارتفاع: 10px ؛ العرض: 100px ؛ z-index: 2 ؛ القاع: 20px ؛ اليسار: 250px ؛} #أزرار #span {cursor: pointer ؛ float: left ؛ الحدود: 1px صلبة #ff ؛ 5px ؛}#buttons .on {background: orangered ؛}. Arrow {Cursor: pointer ؛ display: none ؛ line-height: 39px ؛ text-align: center ؛ font-size: 36px ؛ font-weight: bold ؛ width: 40px ؛ height: 40px ؛ position: aboort ؛ 0 ، .3) ؛ اللون: #fff ؛} DOM Event*//*timer*/window.onload = function () {var container = document.getElementById ('Container') ؛ var list = document.getElementById ('list') ؛ var buttons = document.getElementById ('buttons'). document.getElementById ('next') ؛ var index = 1 ؛ var timer ؛ function inimate (offset) {// ما تم الحصول عليه هو style.left ، وهو المسافة للوصول إلى اليسار ، لذلك بعد الصورة الأولى ، يكون النمط. var newleft = parseint (list.style.left) + Offset ؛ list.style.left = newleft + 'px' ؛ // infinite scrolling justice if (newleft> -600) {list.style.left = -3000 + 'px' ؛ play () {// تكرار التنفيذ timer = setInterval (function () {next.onclick () ؛} ، 2000)} function stop () {clearinterval (timer) ؛ {buttons [i] .className = "" ؛}} // يبدأ الصفيف من 0 ، لذلك يحتاج الفهرس إلى -1buttons [index -1] .className = "on" ؛} prev.onclick = function () من المؤقت أعلاه ، سيستمر المؤشر في الزيادة. ليس لدينا سوى 5 نقاط صغيرة ، لذلك نحتاج إلى إنشاء فهرس الحكم+= 1 ؛ إذا (الفهرس> 5) {index = 1} تحريك (-600) ؛ buttonsshow () ؛} ؛ لـ (var i = 0 ؛ i <buttons.length ؛ i ++) إذا (this.classname == "on") {return ؛}/* هنا ، نحصل على الموضع الذي ينتقل فيه الماوس إلى النقطة ، استخدم هذا لربط الفهرس بأزرار الكائن [i] ، انتقل إلى Google هذا الاستخدام* //* لأن الفهرس هنا هو سمة مخصصة ، فأنت بحاجة إلى استخدام طريقة dom2-level () parseint (this.getAttribute ('index')) ؛ var roffset = 600 * (clickIndex - index) ؛ // هذا الفهرس هو الفهرس (الإزاحة) ؛ الفهرس = clickIndex ؛ // تخزين الموضع بعد النقر فوق الماوس ، واستخدمه لعرض dotsshow () ؛}} container.onmouseover = stop ؛ container.onmouseout = play ؛ play () ؛} </script> </head> <body> <div id = "container"> src = "img/1.jpg"/> <img src = "img/2.jpg"/> <img src = "img/3.jpg"/> <img src = "img/4.jpg"/> <img src = "img/5.jpg" src = "img/2.jpg"/> <img src = "img/3.jpg"/> <img src = "img/4.jpg"/> <img src = "IMG/ index = "2"> </span> <span index = "3"> </span> <span index = "4"> </span> <span index = "5" </span> </viv> <a href = "javaScript :؛" id = "prev"> </a> <a href = "javaScript :؛" id = "next" >> </a> </viv> </body> </html>ما سبق هو رمز Carousel Simple JS الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!