Este artículo se divide en artículos anteriores y próximos. Comparto ocho efectos clásicos del carrusel JS Focus para su referencia. El contenido específico es el siguiente
Diseño básico:
<div id = "box"> <ul id = "ul"> <li style = 'display: block;'> <img src = "imágenes/1.jpg"> </li> <li> <img src = "images/2.jpg"> </ail> <li> <img src = "imágenes/3.jpg"> </li> <li> <iMg src = " <li> <img src = "Images/5.jpg"> </li> </ul> <ol id = 'ol'> <li class = 'activo'> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ol> </div>
---------------------------------------------------------------------------------------------------
1. Mapa de enfoque 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'); 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 = ''; Ali_u [i] .style.display = 'Ninguno'; } this.classname = 'activo'; // console.log (ali_o [this.index]); ali_u [this.index] .style.display = 'block'; }}}Reproducción: imagen omitida
2. Efecto de desvanecimiento
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_o.length; i ++) {ali_se_m. ali_o [i] .onmouseover = function () {for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; Ali_u [i] .style.display = 'Ninguno'; ali_u [i] .style.filter = 'alfa (opacidad = 0)'; ali_u [i] .style.opacity = 0; } this.classname = 'activo'; ali_u [this.index] .style.display = 'block'; startmove (ali_u [this.index], {opacidad: 100}); };}Imagen de reproducción:
3. Desplácese el efecto:
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; para (VareR 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 = 'activo'; startMove (oul, {top: -this.index*liheight}); }};}Imagen de reproducción:
4. Desplácese hacia arriba y hacia abajo regularmente:
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; // temporizador para (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 = 'activo'; // construir una relación: muy importante inow = this.index; startMove (oul, {top: -this.index*liheight}); }}; // Tiempo de tiempo abierto = SetInterval (Torun, 2000); obox.onmouseover = function () {ClearInterval (temporizador); }; obox.onmouseOut = function () {timer = setInterval (Torun, 2000); }; // función de función cronometrada torun () {if (inow == ali_o.length-1) {inow = 0; } else {inow ++; } for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; } ali_o [inow] .classname = 'activo'; startMove (oUl, {top: -Inow*liheight}); }};Imagen de reproducción:
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos. También espero que todos apoyen a Wulin.com y continúen prestando atención a los carruseles de enfoque más emocionantes.