استنادًا إلى المقالة السابقة التي تستخدم JS لتنفيذ رمز تأثير Carousel Image (I) ، تتم إضافة حدث الاستجابة للسهام اليمنى واليسرى ، والنقر على الأسهم اليمنى واليسرى يمكن أيضًا جعل تمرير الصورة:
رمز JS كما يلي:
window.onload = function () {// carousel initialization var lunbo = document.getElementById ('content') ؛ var imgs = lunbo.getElementSbyTagname ('img') ؛ var uls = lunbo.getelementsbytagname ('ul') ؛ var liS = lunbo.getelementsbybytagname ('li') document.getElementById ('next') ؛ var prev = document.getElementById ('prev') ؛ var item = 0 ؛ // في الحالة الأولية ، تكون الدائرة في وضع تسليط الضوء lis [0] .style.fontsize = '26px' ؛ lis [0] .style.color = '#ffff' قم بتغيير ترتيب الصور تلقائيًا var pic_index = 1 ؛ // carousel التلقائي. استخدم pic_time لتسجيل التشغيل ، ويمكنك استخدام ClearInterval () لمسحه في أي وقت. var pic_time = setInterval (autobofang ، 1000) ؛ // وظيفة معالجة الأحداث التلقائية autobofang () {if (pic_index> = lis.length) {pic_index = 0 ؛} picchange (pic_index) ؛ pic_index ++ ؛ lis [i] .addeventListener ("mouseover" ، تغيير ، خطأ) ؛} تغيير الوظيفة (الحدث) {var event = event || window.event ؛ var target = event.target || event.srcelement ؛ 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' ؛ } // عندما يقترب الماوس من منطقة الصورة ، يتوقف التشغيل التلقائي عن lunbo.addeventListener ("Mouseover" ، Function () {clearinterval (pic_time) ؛ SetInterval (Autobofang ، 1000) ؛ 2) {item = 0 ؛} else {item+= 1 ؛} picChange (item) ؛} prev.addeventListener ("انقر فوق" ، moveprev ، false) ؛ function moveprev () {if (item == 0) {item = 2 ؛مخطط التكاثر: رسم تخطيطي للماوس الذي يمر السهم
عندما ينقر الماوس على السهم ، ستتغير الصورة ، وستقوم الدائرة الصغيرة أدناه أيضًا بعرض تأثير تسليط الضوء على الصورة المقابلة.
تلخيص:
تم تحقيق تأثير الكاروسيل الأساسي. ما يجب القيام به لاحقًا هو تبسيط الكود وتغليفه وتحسين الكفاءة التشغيلية.