Este artigo é dividido em artigos anteriores e próximos. Eu compartilho oito efeitos clássicos do JS Focus Carousel para sua referência. O conteúdo específico é o seguinte
Layout básico:
<div id = "box"> <ul id = "ul"> <li style = 'display: block;'> <img src = "imagens/1.jpg"> </li> <li> <img src = "imagens/2.jpg"> </li> <li> <img src = "Images/5.jpg"> </li> </ul> <ol id = 'ol'> <li class = 'Active'> 1 </li> <li> 2 </li> <li> 3 </li> <li>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1. Mapa de foco normal
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'); 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 = 'nenhum'; } this.className = 'Active'; // console.log (Ali_o [this.index]); ali_u [this.index] .style.display = 'bloco'; }}}Reprodução: imagem omitida
2. Efeito desbotado
var om = document.getElementById ('ul'); var ali_u = Oul.getElementsByTagName ('li'); var ool = document.getElementById ('ol'); var ali_o = ool.getElementsByTagname ('li'); para (var i = 0; i <ali_o.lngthngthen; ali_o [i] .onMouseOver = function () {for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .className = ''; ali_u [i] .style.display = 'nenhum'; ali_u [i] .style.filter = 'alfa (opacidade = 0)'; ali_u [i] .style.Opacity = 0; } this.className = 'Active'; ali_u [this.index] .style.display = 'bloco'; startMove (ali_u [this.index], {opacity: 100}); };}Imagem de reprodução:
3. Efeito role para cima:
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]. 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'; startMove (OU, {top: -This.index*liHeight}); }};}Imagem de reprodução:
4. Role para cima e para baixo regularmente:
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; // índice atual var timer = null; // timer 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 = 'Active'; // Relacionamento de construção: muito importante inow = this.index; startMove (OU, {top: -This.index*liHeight}); }}; // Timer de temporizador aberto = setInterval (Torun, 2000); obox.onMouseOver = function () {clearInterval (timer); }; obox.onMouseOut = function () {timer = setInterval (Torun, 2000); }; // função cronometrada função torun () {if (inow == ALI_O.LENGLED-1) {INOW = 0; } else {inow ++; } for (var i = 0; i <ali_o.length; i ++) {ali_o [i] .className = ''; } Ali_O [INOW] .className = 'Active'; startMove (oul, {top: -Imow*liHeight}); }};Imagem de reprodução:
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos. Espero também que todos apoiem o Wulin.com e continuem prestando atenção a carrosséis de foco mais emocionantes.