Artikel ini dibagi menjadi artikel sebelumnya dan berikutnya. Saya berbagi delapan efek klasik dari JS Focus Carousel untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Tata Letak Dasar:
<Div id = "box"> <ul id = "ul"> <li style = 'display: block;'> <img src = "gambar/1.jpg"> </li> <li> <mgg = "gambar/2.jpg"> </li> <li> <img src = "gambar/gambar 3.jpg"> </Li> <li> <li> <iMg src = "/3.jpg"> </Li> <li> <li> <li> <img src = "gambar/5.jpg"> </li> </ul> <ol id = 'ol'> <Li class = 'Active'> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ol> </div>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1. Peta fokus normal
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'); untuk (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 = 'tidak ada'; } this.className = 'Active'; // console.log (ali_o [this.index]); ali_u [this.index] .style.display = 'block'; }}}Reproduksi: Gambar dihilangkan
2. Efek pudar
var oul = document.geteLementById ('ul'); var ali_u = oul.getElementsbyTagname ('li'); var ool = document.geteLementById ('ol'); var ali_o = ool.getElementsbyTagname ('li'); untuk (var i = 0; i <ali_o.length; ali_o [i] .onmouseOver = function () {for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; ali_u [i] .style.display = 'tidak ada'; ali_u [i] .style.filter = 'alpha (opacity = 0)'; ali_u [i] .style.opacity = 0; } this.className = 'Active'; ali_u [this.index] .style.display = 'block'; startMove (ali_u [this.index], {opacity: 100}); };}Gambar reproduksi:
3. Gulir Efek:
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] .Offset 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 = 'aktif'; startMove (oul, {top: -this.index*lIHeight}); }};}Gambar reproduksi:
4. Gulir ke atas dan ke bawah secara teratur:
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; // indeks saat ini var timer = null; // timer untuk (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 = 'aktif'; // Bangun Hubungan: sangat penting Inow = this.index; startMove (oul, {top: -this.index*lIHeight}); }}; // Buka Timer Timer = SetInterval (Torun, 2000); obox.onmouseover = function () {clearInterval (timer); }; obox.onmouseout = function () {timer = setInterval (Torun, 2000); }; // Fungsi fungsi waktunya torun () {if (inow == ali_o.length-1) {inow = 0; } else {inow ++; } untuk (var i = 0; i <ali_o.length; i ++) {ali_o [i] .className = ''; } ali_o [inow] .className = 'Active'; startMove (oul, {top: -inow*lIHeight}); }};Gambar reproduksi:
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang. Saya juga berharap semua orang akan mendukung wulin.com dan terus memperhatikan korsel fokus yang lebih menarik.