قم بتنفيذ ثمانية أنواع من Cs Carousels JS (الجزء 1)

هذه المقالة مقسمة إلى المقالات السابقة والقادمة. أشارك ثمانية تأثيرات كلاسيكية من JS Focus Carousel للرجوع إليها. المحتوى المحدد كما يلي

التصميم الأساسي:

 <div id = "box"> <ul id = "ul"> <li style = 'display: block ؛'> <img src = "images/1.jpg"> </li> <li> <img src = "images/2.jpg"> </li> <li> <img src = "الصور/3.jpg" <li> <img src = "images/5.jpg"> </li></ul> <ol id = 'ol'> <li class = 'active'> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </li> </liv>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1. خريطة التركيز العادية

 window.onload = function () {var oul = document.getElementById ('ul') ؛ var ali_u = oul.getElementsByTagname ('li') ؛ var ool = document.getElementById ('ol') ؛ var ali_o = ool.getElementsByTagName ('li') ؛ لـ (var i = 0 ؛ i <ali_o.length ؛ i ++) {ali_o [i] .index = i ؛ ali_o [i] .onmouseover = function () {for (var i = 0 ؛ i <ali_o.length ؛ i ++) {ali_o [i] .className = '' ؛ ali_u [i] .style.display = 'none' ؛ } this.className = 'Active' ؛ // console.log (ali_o [this.index]) ؛ ali_u [this.index] .style.display = 'block' ؛ }}}

التكاثر: تم حذف الصورة

2

 var oul = document.getElementById ('ul') ؛ var ali_u = oul.getElementsByTagName ('li') ؛ var ool = document.getElementById ('ol') ؛ var ali_o = ool.getElementSbyTagname ('li') ؛ for (var i = 0 ؛ i <ali_ulenment ؛ ali_o [i] .onmouseover = function () {for (var i = 0 ؛ i <ali_o.length ؛ i ++) {ali_o [i] .className = '' ؛ ali_u [i] .style.display = 'none' ؛ ali_u [i] .style.filter = 'alpha (عتامة = 0)' ؛ ali_u [i] .style.Opacity = 0 ؛ } this.className = 'Active' ؛ ali_u [this.index] .style.display = 'block' ؛ startMove (ali_u [this.index] ، {opacity: 100}) ؛ } ؛}

صورة التكاثر:

3. قم بالتمرير لأعلى:

 var oul = document.getElementById ('ul') ؛ var ali_u = oul.getElementsByTagName ('li') ؛ var ool = document.getElementById ('ol') ؛ var ali_o = oool.getelementsbytagname ('li') ؛ var lihight = ali_u [0] i = 0 ؛ i <ali_o.length ؛ i ++) {ali_o [i] .index = i ؛ ali_o [i] .onmouseover = function () {for (var i = 0 ؛ i <ali_o.length ؛ i ++) {ali_o [i] .className = '' ؛ this.className = 'active' ؛ StarTmove (oul ، {top: -his.index*liheight}) ؛ }} ؛}

صورة التكاثر:

4. انتقل لأعلى ولأسفل بانتظام:

 window.onload = function () {var obox = document.getElementById ('box') ؛ var oul = document.getElementById ('ul') ؛ var ali_u = oul.getElementsByTagname ('li') ؛ var ool = document.getElementById ('ol') ؛ var ali_o = ool.getElementsByTagName ('li') ؛ var liheight = ali_u [0] .OffSetheight ؛ var inow = 0 ؛ // current index var timer = null ؛ // timer for (var i = 0 ؛ i <ali_o.length ؛ i ++) {ali_o [i] .index = i ؛ ali_o [i] .onmouseover = function () {for (var i = 0 ؛ i <ali_o.length ؛ i ++) {ali_o [i] .className = '' ؛ this.className = 'active' ؛ // بناء العلاقة: inow المهم للغاية = this.index ؛ StarTmove (oul ، {top: -his.index*liheight}) ؛ }} ؛ // Open Timer Timer = SetInterval (Torun ، 2000) ؛ obox.onmouseover = function () {clearinterval (timer) ؛ } ؛ obox.onmouseout = function () {timer = setInterval (Torun ، 2000) ؛ } ؛ // وظيفة timed function torun () {if (inow == ali_o.length-1) {inow = 0 ؛ } آخر {inow ++ ؛ } لـ (var i = 0 ؛ i <ali_o.length ؛ i ++) {ali_o [i] .className = '' ؛ } ali_o [inow] .className = 'Active' ؛ startMove (oul ، {top: -inow*liheight}) ؛ }} ؛

صورة التكاثر:

ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع. آمل أيضًا أن يدعم الجميع wulin.com ويواصل الانتباه إلى مزيد من الإثارة في تركيزات التركيز.