Hoje eu vi a imagem deslizante escrita por outra pessoa. Parecia legal. Ao ler o código -fonte, parecia um pouco difícil. Então eu imitei e escrevi um. O efeito foi o mesmo que a página da web original, mas meu próprio código JS é simples na lógica e precisa ser melhorado.
PS: Eu escrevi um carrossel há dois dias, e essa compatibilidade não é boa. Quando escrevi esta página da web hoje, também segui essa ideia e fui muito bem no Google Chrome. Muitas funções do Firefox não podem ser implementadas. Como o Wrap-Panel usa posicionamento absoluto, a tradução da tradução é alterada para a esquerda. Após as mudanças, cada navegador funciona bem.
O código específico é o seguinte
Código HTML (sem comentários escritos)
<div> <h1> parallax slider </h1> <div> <div> <div id = "bg_1" style = "esquerda: 0px;"> </div> <div id = "bg_2" style = "esquerda: 0px; style = "esquerda: 0px;"> <div> <img id = "img_1" src = "imagens/1.jpg"> </div> <div> <img src = "imagens/2.jpg"> </div> <iv> <mg src = "imagens/3.jpg"> </div> <mi> <mg> <mg src = "imagens/3.jpg"> </div> <iv> <mi> src = "Images/5.jpg"> </div> <div> <img src = "imagens/6.jpg"> </div> </div> <div> <span id = "perv_btn"> </span> <span id = "next_btn"> </span> </div> <div> </span> <btn_btn = next_btn "> </span> </div> <div> <div> <span <btt =" next_btn "> </span> </div> <div> <div> <span <btn_btn =" next_btn "> </span> <div> <div> <div> <span>" next_btn "> id = "show_small"> <ul> <li> <img src = "imagens/thumbs/1.jpg"> </li> <li> <img src = "imagens/thumbs/2.jpg"> </li> <li> <img src = "imagens/thumbs/3.jpg"> <li> <li> src = "imagens/thumbs/4.jpg"> </li> <li> <img src = "imagens/thumbs/5.jpg"> </li> <li> <img src = "imagens/thumbs/6.jpg"> </li> </l> </div> </div> </div>
Código CSS (leia você mesmo):
* {margem: 0; preenchimento: 0; } html, corpo, .container {width: 100%; Altura: 100%; Fonte-família: 'Microsoft Yahei'; } .Container {Background-Color: #222; Overflow-x: Hidden; } .Container H1 {font-size: 50px; Cor: #ccc; Alinhamento de texto: centro; Peso da fonte: mais ousado; Altura: 120px; altura da linha: 120px; } .WRAP {Position: relativo; largura: 600%; Altura: 400px; Top de borda: 10px Solid #333; fundo de borda: 10px Solid #333; Margin-top: 20px; } .bg {posição: absoluto; largura: 100%; Altura: 100%; Esquerda: 0; topo: 0; -Webkit-transição: todos os 1s; -moz-transição: todos os 1s; -ms-transição: todos os 1s; -O-transição: todos os 1s; -O-transição: todos os 1s; transição: todos os 1s; } .bg-1 {background: url (imagens/bg1.png); } .bg-2 {background: url (imagens/bg2.png); } .bg-3 {background: url (imagens/bg3.png); } .Wrap-pain {Posição: Absolute; largura: 100%; Altura: 100%; -Webkit-transição: todos os 1s; -moz-transição: todos os 1s; -ms-transição: todos os 1s; -O-transição: todos os 1s; transição: todos os 1s; } .Panel {Width: 16,66%; Altura: 100%; flutuar: esquerda; } .Panel img {display: block; margem: 0 automático; Margin-top: 35px; Radio de fronteira: 10px; borda: 10px RGBA sólido (143, 143, 143, 0,6); } .Navigation-Button Span: Hover {Opacity: 0.8} .Perv-Button, .Next-Button {Posição: Absolute; Largura: 30px; Altura: 60px; Background-Color: #344133; Radio de fronteira: 10px; Cursor: Ponteiro; Opacidade: 0,4; } .Perv-Button {Background: #000 URL (imagens/prev.png) Centro Center No-REPEAT; } .Next-Button {Background: #000 URL (Images/Next.png) Center Center Center No-REPEAT; } .show-small {Position: Absolute; Largura: 680px; Inferior: 20px; } .Show-small Ul {estilo de lista: nenhum; } .Show-small ul li {float: esquerda; margem: 0 10px; borda: 5px sólido #fff; Opacidade: 0,7; Cursor: Ponteiro; -Webkit-transição: todos .3s; -moz-transição: todos .3s; -ms-transição: todos .3s; -O-transição: todos .3s; Transição: todos .3s; } .show-small ul li: hover {margin-top: -15px; }Código JS (Small Demo):
window.onload = function () {// obtenha o elemento var getDom = function (id) {return typeof id === "string"? document.getElementById (id): id; } // obtenha o objeto var iMg = getDom ('img_1'); var prev = getDom ("perv_btn"); var próximo = getDom ("next_btn"); var wrap_panel = getDom ('wrap_panel'); var bg_1 = getDom ("bg_1"); var bg_2 = getDom ("bg_2"); var bg_3 = getdom ("bg_3"); var show_small = getDom ("show_small"); var lista = show_small.getElementsByTagName ("li"); var wwidth; // Evento de ligação para elemento var addEvent = function (id, evento, fn) {var el = getDom (id) || documento; if (el.addeventListener) {el.addeventListener (evento, fn, false); } else if (el.attachevent) {el.attachevent ('no' + evento, fn); }} function init () {// posicione o botão // A distância esquerda do botão avançado = a distância esquerda da imagem + borda prev.style.left = img.offsetleft + 10 + 'px'; // A distância superior do botão avançado = a distância superior da imagem + metade da altura da imagem - metade do botão prev.style.top = img.offsettop + img.clientHeight/2 - prev.clientHeight/2 + 'px'; next.style.left = img.offsetleft + img.clientWidth + 10 - Next.clientWidth + 'PX'; next.style.top = prev.style.top; // Posicione o recipiente de pequenas imagens wwidth = document.documentElement.clientWidth || document.body.clientWidth; show_small.style.left = (wwidth - show_small.clientwidth)/2 + 'px'; } // Função de processamento de imagem pequena pequena_img () {// gira a imagem para (var i = 0; i <list.length; i ++) {// girar direção = math.pow (-1, parseint (math.random ()*10)); lista [i] .style = "Transform: girate (" + (math.random ()*20*direção) + "deg)"; } lista [0] .style.Opacity = 1; } função somente_One (el, num) {for (var i = 0; i <el.length; i ++) {el [i] .style.opacity = 0.7; } // console.log (num); el [num] .style.Opacity = 1; } // Quando o navegador é zoom, window.onResize = function () {init (); } // execute a função init (); small_img (); addEvent (prev, 'click', function () {// altere a esquerda Var OldPos de Wrap-Panel Oldpos = parseint (wrap_panel.style.left); if (Oldpos == 0) {// Pan Pan Pan Pan Pan Pan Pan Pan Pan Pan Pan Pan Pan Pan Pan bg_1.style.left = bg_2.style.left = bg_3.style.left = wrap_panel.style.left = -wwidth*(list.length-1) +'px'; (Oldpos + wwidth) + 'px'; bg_3.style.left = (Oldpos + wwidth-parsent (-(Oldpos/wwidth + 1))*500) + 'px'; addEvent (em seguida, 'clique', function () {// altere a esquerda Var Oldpos de Wrap-Panel Oldpos = parseint (wrap_panel.style.left); if (Oldpos == -wwidth*(list.length-1) {// Pan Pan Pan Fiction Pan Pan) bg_1.style.left = bg_2.style.left = bg_3.style.left = wrap_panel.style.left = '0px'; + 'PX'; (Oldpos - wwidth + parseint ( - (Oldpos/wwidth + 1))*500) + 'px'; }O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.