1. مبدأ التنفيذ
(1) ضع جميع الصور في حاوية الوالدين ، وقم بتعيين مظهر الصور وإخفائها من خلال سمة العرض ؛
(2) ينقسم مخطط الكاروسيل إلى كاروسيل يدوي والركض الأوتوماتيكي ؛
يتمثل تركيز Carousel اليدوي في النقر على الدائرة الصغيرة أسفل الصورة في كل مرة تنقر عليها ، واحصل على رقم الفهرس الخاص به ، والسماح للصورة برقم الفهرس المقابل ، ويتم تمييز الدائرة الصغيرة في هذا الوقت ؛
الكاروسيل التلقائي: استخدم Timer SetInterval () لتشغيل الصورة في كل وقت معين.
(3) جميع المعرفة الأساسية: تشغيل DOM ، مؤقت ، تطبيق الحدث.
2. تصميم صفحة صورة كاروسيل:
<div id = "content"> <!-إجمالي حاوية الأصل-> <div> <!-حاوية تحتوي على صور-> <div> <img src = "./ img/lunbo1.jpg"> </viv> <viv> <img src = "./ img/lunbo2.jpg src = "./ img/lunbo3.jpg"> </div> <!-دائرة الإشارة أسفل الصورة-> <ul> <li id = 'pic1'> ● </li> <li id = 'pic2'> ● </li> </ul> <!-قم بتمرير السهام اليمنى واليمين للخلف- href = "#"> <span>> </span> </a> </viv>
3. نمط CSS من مخطط الكاروسيل:
#content {width: 100 ٪ ؛ الارتفاع: 500px ؛ الموضع: النسبية ؛}. الارتفاع: 500 بكسل ؛ } .carousel-inner> .item> img {display: block ؛ ارتفاع الخط: 1 ؛ z-index: 1 ؛}. المؤشر: مؤشر ؛ z-index: 2 ؛}. Active1 {font-size: 28px ؛ color: #fff ؛}. 3 ؛}. carousel-control: hover {color: fff ؛ decoration text: none ؛ opitor: .9 ؛ Outline: none ؛ font-size: 42px ؛}. prev {top: 30 ٪ ؛ اليسار: 20 بكسل ؛ } .next {TOP: 30 ٪ ؛ اليمين: 20px ؛4. رمز تنفيذ JS لمخطط Carousel:
window.onload = function () {// carousel initialization var lunbo = document.getElementById ('content') ؛ var imgs = lunbo.getElementsByTagname ('img') ؛ var uls = lunbo.getElementsByTagName ('ul') ؛ var lis = lunbo.getElementsByTagName ('li') ؛ // في الحالة الأولية ، تكون الدائرة في وضع تسليط الضوء lis [0] .style.fontsize = '26px' carousel var pic_index = 1 ؛ // carousel التلقائي. استخدم PIC_TIME لتسجيل التشغيل ، يمكنك استخدام ClearInterval () لمسحه في أي وقت. var pic_time = setInterval (autobofang ، 3000) ؛ // carousel manual for (var i = 0 ؛ i <lis.length ؛ i ++) {lis [i] .addeventListener ("mouseover" ، change ، false) ؛} تغيير الوظيفة (حدث) var children = target.parentnode.children ؛ لـ (var i = 0 ؛ i <children.length ؛ i ++) {if (target == children [i]) {picChange (i) ؛ }) lis [j] .style.fontsize = '24px' ؛ lis [j] .style.color = '#999' ؛} // دعنا يتم عرض صورة الفهرس المحددة ، ويتم تمييز الدائرة المقابلة IMGs [i] .style.display = 'block' ؛ lis [i] .style.fontsize = '26px' ؛ lis [i] .style.color = '#fff' ؛ }. ULS [0] .AdDeventListener ("Mouseover" ، وقفة ، خطأ) ؛ // Mouse تحرك علامة UL ، يلعب الصورة تلقائيًا ULS [0]. target = event.target || event.srcelement ؛ switch (target.id) {case "pic1": clearinterval (pic_time) ؛ break ؛ case "pic2": clearinterval (pic_time) ؛ break ؛ case "pic3": clearinterval (pic_time) ؛ break ؛}} // صورة تشغيل تلقائية مستمرة وظيفة (حدث) Switch (target.id) {case "pic1": pic_index = 1 ؛ pic_time = setInterval (autobofang ، 3000) ؛ break ؛ case "pic2": pic_index = 2 ؛ pic_time = setInterval (autobofang ، 3000) ؛ break ؛ case "pic3": pic_index = 3 ؛ pic_time = setInterval (autobofang ، 3000) ؛ break ؛}}}5. صورة التكاثر:
6. مشاكل وأوجه القصور التي واجهتها
المشكلة: عندما ينتقل الماوس إلى علامة UL لأول مرة ، تتوقف صورة Carousel التلقائي ، وتتحرك الماوس ، وتستمر الكاروسيل التلقائي ، ولكن مع تشغيل العملية ، تتغير صورة الكاروسيل بشكل أسرع وأسرع ، والنقر فوق علامة UL في هذا الوقت.
سبب المشكلة: عند استخدام المؤقت مرة أخرى بعد إيقاف carousel ، لا يتم تعيين القيمة إلى PIC_TIME للتسجيل ، لذلك لا يتم نقل الماوس إلى علامة UL مرة أخرى لمسح المؤقت. لذلك ، لا يمكن للنقر على علامة UL مرة أخرى إيقاف تشغيل Carousel التلقائي ، والسرعة تصبح أسرع وأسرع.
عدم كفاية: لم يتم تحقيق تأثير لا يتجاوز عدم وجود ريال مثل مخطط تاوباو كاروسيل ، ولم يتم إكمال تأثير مؤشر الأسهم اليمنى واليسرى. ستستمر هذه في التعلم في المرحلة اللاحقة ، والتحسين والمشاركة.