Continúe con el artículo anterior para aprender perfectamente ocho tipos de carrusels JS Focus (artículo anterior), para su referencia, el contenido específico es el siguiente
5. Despláze oportunamente hacia arriba y hacia abajo sin problemas
Ideas:
1. Idea 1: Copie una copia de UL, pero vuelva a la posición a la mitad de la distancia de desplazamiento; (sitios web grandes funcionan ligeramente más bajo);
2. Idea 2: a través del posicionamiento relativo, mueva el primer LI al final y luego regrese a UL y Li a la posición.
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; // valor para el botón var inow2 = 0; // utilizado para desplazar VAR Timer = null; 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 = 'activo'; // construir una relación: muy importante inow = this.index; inow2 = this.index; startMove (oul, {top: -this.index*liheight}); }}; } temporizador = setInterval (Torun, 2000); obox.onmouseover = function () {ClearInterval (temporizador); }; obox.onmouseOut = function () {timer = setInterval (Torun, 2000); }; función torun () {if (inow == 0) {// restaurar Li y colocar ul ali_u [0] .style.position = 'static'; oul.style.top = 0; // Recuerde restaurar inow2 a inow2 = 0; } if (inow == ali_o.length-1) {// mueve el primer li al último inow = 0; ali_u [0] .style.position = 'relativo'; ali_u [0] .style.top = ali_u.length*liheight+'px'; } else {inow ++; } inow2 ++; for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; } ali_o [inow] .classname = 'activo'; startMove (oul, {top: -Inow2*liheight}); }};Imagen de reproducción:
6. El efecto de la conmutación perfecta entre la izquierda y la derecha
Ideas:
1. Posicionamiento absoluto: todos los LI excepto el primero se colocan a la derecha, compare el valor del índice con el índice actual y localice la posición de la LI para aparecer.
2. Agregue "interruptor" o "intervalo de tiempo" para controlar la frecuencia de conmutación de movimiento!
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; // Todos posicionados a la derecha, excepto por el primer elemento para (var i = 1; i <ali_u.length; i ++) {ali_u [i] .style.left = liwidth+'px'; } for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .index = i; ali_o [i] .onmouseover = function () {if (bbtn) {bbtn = false; for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .classname = ''; } this.classname = 'activo'; // juzga el cambio de izquierda y derecha if (inow <this.index) {// localiza el li ali_u [this.index] .style.left = liWidth+'px'; // Mueve el Li actual Alejado StartMove (ali_u [inow], {izquierda: -liWidth}); } else if (inow> this.index) {ali_u [this.index] .style.left = -liWidth+'px'; startmove (ali_u [inow], {izquierda: liwidth}); } startmove (ali_u [this.index], {izquierda: 0}, function () {bbtn = true; // El siguiente movimiento solo se puede realizar después de completar el movimiento actual}); // Asigna el índice actual a inow = this.index; } // Switch si termina}; }};Imagen de reproducción:
7. efecto de acordeón
1. Idea 1: Hágalo cambiando el ancho de Li;
2. Idea 2: Todos LI excepto el primer elemento se colocan a intervalos iguales, y la posición se cambia equidistantemente después de que se activa el evento.
Window.Onload = function () {var oUl = document.getElementById ('ul'); var ali_u = oUl.getElementsByTagName ('li'); // Todo posicionamiento excepto el primer elemento para (var i = 1; i <ali_u.length; i ++) {// posicionamiento isométrico 30px ali_u [i] .style.left = (470-3*40)+(i-1)*30+'px'; } 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 ++) {ali_u [i] .index = i; ali_u [i] .onmouseover = function () {for (var i = 0; i <ali_u.length; i ++) {if (i <= this.index) {// todas las arreglos izquierdos más pequeños que el índice startmove (ali_u [i], {izquierda: i*30}); } else {// todas las arreglos correctos más grandes que el índice StartMove (ali_u [i], {izquierda: (470-3*40)+(i-1)*30}); }}}}}}};Imagen de reproducción:
8. Efecto de acordeón 2
¡Posición li uniformemente sobre la base anterior!
Window.Onload = function () {var oUl = document.getElementById ('ul'); var ali_u = oUl.getElementsByTagName ('li'); var num = Math.ceil (470/ali_u.length); // ancho de cada uno // todo posicionamiento excepto el primer elemento para (var i = 1; i <ali_u.length; i ++) {ali_u [i] .style.left = num*i+'px'; } 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 ++) {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], {izquierda: i*30}); } else {startmove (ali_u [i], {izquierda: (470-3*40)+(i-1)*30}); }}}}; ali_u [i] .onmouseout = function () {for (var i = 0; i <ali_u.length; i ++) {startmove (ali_u [i], {izquierda: num*i}); }}; }};Imagen de reproducción:
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.