هذه المقالة مقسمة إلى المقالات السابقة والقادمة. أشارك ثمانية تأثيرات كلاسيكية من 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 ويواصل الانتباه إلى مزيد من الإثارة في تركيزات التركيز.