Continue até o artigo anterior para aprender perfeitamente oito tipos de carrosséis de foco JS (artigo anterior), para sua referência, o conteúdo específico é o seguinte
5. Rolagem oportuna para cima e para baixo perfeitamente
Ideias:
1. Ideia 1: Copie uma cópia da UL, mas retorne à posição pela metade da distância de rolagem; (sites grandes com desempenho ligeiramente mais baixo);
2. IDEA 2: Através do posicionamento relativo, mova o primeiro li até o final e depois retorne Ul e Li à posição.
window.onload = function () {var obox = document.getElementById ('caixa'); var al = 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 now = 0; // valor para o botão var now2 = 0; // usado para rolar 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 = 'Active'; // Relacionamento de construção: muito importante inow = this.index; Inow2 = this.index; startMove (OU, {top: -This.index*liHeight}); }}; } timer = setInterval (Torun, 2000); obox.onMouseOver = function () {clearInterval (timer); }; obox.onMouseOut = function () {timer = setInterval (Torun, 2000); }; function torun () {if (inow == 0) {// restaure li e coloque ul ali_u [0] .style.position = 'static'; ol.style.top = 0; // Lembre -se de restaurar InoW2 para Inow2 = 0; } if (inow == ALI_O.LENGLENHO-1) {// mova o primeiro li para o ú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 = 'Active'; startMove (OU, {TOP: -INOW2*liHeight}); }};Imagem de reprodução:
6. o efeito da alternância contínua entre a esquerda e a direita
Ideias:
1. Posicionamento absoluto: todos os LI, exceto o primeiro, estão posicionados à direita, compare o valor do índice com o índice atual e localize a posição do Li para aparecer.
2. Adicione "interruptor" ou "intervalo de tempo" para controlar a frequência de comutação de movimento!
window.onload = function () {var al = 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; // Tudo posicionado à direita, exceto pelo primeiro item 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 = 'Active'; // Juiz Mudança esquerda e direita if (inow <this.index) {// localize o li ali_u [this.index] .style.left = liwidth+'px'; // mova o atual Li Away StartMove (Ali_u [Inow], {esquerda: -liwidth}); } else if (inow> this.index) {ali_u [this.index] .style.left = -liwidth+'px'; startMove (Ali_u [Inow], {esquerda: liwidth}); } startMove (ali_u [this.index], {esquerda: 0}, function () {bbtn = true; // O próximo movimento pode ser executado somente após a conclusão do movimento atual}); // atribui o índice atual a new = this.index; } // interruptor se termina}; }};Imagem de reprodução:
7. Efeito de acordeão
1. Ideia 1: faça isso alterando a largura de Li;
2. IDEA 2: Todos os LI, exceto o primeiro item, estão posicionados em intervalos iguais, e a posição é alterada equidistantemente após o acionamento do evento.
window.onload = function () {var al = document.getElementById ('ul'); var Ali_u = Oul.getElementsByTagName ('Li'); // Todo o posicionamento, exceto o primeiro item para (var i = 1; i <ali_u.length; i ++) {// isométrico de 30px posicionamento Ali_u [i] .style.left = (470-3*40)+(i-1)*30+'px'; } para (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) {// Todos os arranjos de esquerda menores que o índice startMove (ali_u [i], {esquerda: i*30}); } else {// todos os arranjos corretos maiores que o índice startmove (Ali_u [i], {esquerda: (470-3*40)+(i-1)*30}); }}}}}}};Imagem de reprodução:
8. Efeito de acordeão 2
Posição uniformemente na base anterior!
window.onload = function () {var al = document.getElementById ('ul'); var Ali_u = Oul.getElementsByTagName ('Li'); var num = math.ceil (470/ali_u.length); // largura de cada um // todo posicionamento, exceto o primeiro item para (var i = 1; i <ali_u.length; i ++) {ali_u [i] .style.left = num*i+'px'; } para (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], {esquerda: i*30}); } else {startMove (Ali_u [i], {esquerda: (470-3*40)+(i-1)*30}); }}}}; ali_u [i] .onMouseOut = function () {for (var i = 0; i <ali_u.length; i ++) {startMove (ali_u [i], {esquerda: num*i}); }}; }};Imagem de reprodução:
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.