تابع المقالة السابقة لتعلم تنفيذ ثمانية أنواع من carousels Focus (المقالة السابقة) ، للرجوع إليها ، المحتوى المحدد هو كما يلي
5. التمرير في الوقت المناسب لأعلى ولأسفل بسلاسة
الأفكار:
1. الفكرة 1: نسخ نسخة واحدة من UL ، ولكن العودة إلى الموضع بمقدار نصف مسافة التمرير ؛ (مواقع الويب الكبيرة تؤدي أقل قليلاً) ؛
2. الفكرة 2: من خلال تحديد المواقع النسبية ، انقل أول لي إلى النهاية ، ثم إعادة UL و LI إلى الموقف.
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 ؛ // قيمة الزر var inow2 = 0 ؛ // المستخدمة لتمرير var timer = null ؛ لـ (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 ؛ inow2 = this.index ؛ StarTmove (oul ، {top: -his.index*liheight}) ؛ }} ؛ } timer = setInterval (Torun ، 2000) ؛ obox.onmouseover = function () {clearinterval (timer) ؛ } ؛ obox.onmouseout = function () {timer = setInterval (Torun ، 2000) ؛ } ؛ وظيفة torun () {if (inow == 0) {// استعادة li و place ul ali_u [0] .style.position = 'static' ؛ oul.style.top = 0 ؛ // تذكر استعادة inow2 إلى inow2 = 0 ؛ } if (inow == ali_o.length-1) {// انقل أول li إلى آخر inow = 0 ؛ ali_u [0] .style.position = 'النسبية' ؛ ali_u [0] .style.top = ali_u.length*liheight+'px' ؛ } آخر {inow ++ ؛ } inow2 ++ ؛ لـ (var i = 0 ؛ i <ali_o.length ؛ i ++) {ali_o [i] .className = '' ؛ } ali_o [inow] .className = 'Active' ؛ startMove (oul ، {top: -inow2*liheight}) ؛ }} ؛صورة التكاثر:
6. تأثير التبديل السلس بين اليسار واليمين
الأفكار:
1. تحديد المواقع المطلقة: يتم وضع كل LI باستثناء الأول إلى اليمين ، وقارن قيمة الفهرس مع الفهرس الحالي ، وتحديد موضع LI للظهور.
2. أضف "التبديل" أو "الفاصل الزمني" للتحكم في تردد تبديل الحركة!
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 liwidth = ali_u [0] .OffSetWidth ؛ var inow = 0 ؛ var bbtn = true ؛ // جميع الموضع على اليمين باستثناء العنصر الأول لـ (var i = 1 ؛ i <ali_u.length ؛ i ++) {ali_u [i] .style.left = liwidth+'px' ؛ } لـ (var i = 0 ؛ i <ali_o.length ؛ i ++) {ali_o [i] .index = i ؛ ali_o [i] .onmouseover = function () {if (bbtn) {bbtn = false ؛ لـ (var i = 0 ؛ i <ali_o.length ؛ i ++) {ali_o [i] .className = '' ؛ } this.className = 'Active' ؛ . // حرك LI الحالي StartMove (ali_u [inow] ، {left: -liwidth}) ؛ } if if (inow> this.index) {ali_u [this.index] .style.left = -liwidth+'px' ؛ startMove (ali_u [inow] ، {left: liwidth}) ؛ } startMove (ali_u [this.index] ، {left: 0} ، function () {bbtn = true ؛ // لا يمكن تنفيذ الحركة التالية إلا بعد اكتمال الحركة الحالية}) ؛ // تعيين الفهرس الحالي إلى inow = this.index ؛ } // التبديل إذا انتهى} ؛ }} ؛صورة التكاثر:
7. تأثير الأكورديون
1. الفكرة 1: اجعلها عن طريق تغيير عرض LI ؛
2. الفكرة 2: يتم وضع كل العنصر باستثناء العنصر الأول على فترات متساوية ، ويتم تغيير الموضع بشكل متساوٍ بعد أن يتم تشغيل الحدث.
window.onload = function () {var oul = document.getElementById ('ul') ؛ var ali_u = oul.getElementsByTagname ('li') ؛ // جميع المواقع باستثناء العنصر الأول لـ (var i = 1 ؛ i <ali_u.length ؛ i ++) {// Isometric 30px positioning ali_u [i] .style.left = (470-3*40)+(i-1)*30+'px' ؛ } لـ (var i = 0 ؛ i <ali_u.length ؛ i ++) {ali_u [i] .index = i ؛ ali_u [i] .onmouseover = function () {for (var i = 0 ؛ i <ali_u.length ؛ i ++) {ali_u [i] .index = i ؛ ali_u [i] .onmouseover = function () {for (var i = 0 ؛ i <ali_u.length ؛ i ++) {if (i <= this.index) {// جميع الترتيبات اليسرى أصغر من starmove الفهرس (ali_u [i] ، {يسار: i*30}) ؛ } آخر {// جميع الترتيبات اليمنى أكبر من فهرس starmove (ali_u [i] ، {left: (470-3*40)+(i-1)*30}) ؛ }}}}}}} ؛صورة التكاثر:
8. تأثير الأكورديون 2
موقف LI بالتساوي على أساس سابق!
window.onload = function () {var oul = document.getElementById ('ul') ؛ var ali_u = oul.getElementsByTagname ('li') ؛ var num = math.ceil (470/ali_u.length) ؛ // عرض كل // جميع المواقع باستثناء العنصر الأول لـ (var i = 1 ؛ i <ali_u.length ؛ i ++) {ali_u [i] .style.left = num*i+'px' ؛ } لـ (var i = 0 ؛ i <ali_u.length ؛ i ++) {ali_u [i] .index = i ؛ ali_u [i] .onmouseover = function () {for (var i = 0 ؛ i <ali_u.length ؛ i ++) {ali_u [i] .index = i ؛ ali_u [i] .onmouseover = function () {for (var i = 0 ؛ i <ali_u.length ؛ i ++) {if (i <= this.index) {startMove (ali_u [i] ، {left: i*30}) ؛ } else {startMove (ali_u [i] ، {left: (470-3*40)+(i-1)*30}) ؛ }}}} ؛ ali_u [i] .onmouseout = function () {for (var i = 0 ؛ i <ali_u.length ؛ i ++) {startMove (ali_u [i] ، {left: num*i}) ؛ }} ؛ }} ؛صورة التكاثر:
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.