Plug -in! Plug -in! Eu ouço pessoas pedindo esse plug-in e esse plug-in todos os dias. Obviamente, o uso de plug-ins de terceiros pode melhorar bastante a eficiência do desenvolvimento, mas, como novato, ainda gosto de implementá-lo, principalmente porque tenho tempo!
Hoje vou compartilhar com você como escrever carrosséis de fotos usando JS nativo
Os idosos podem ignorar o seguinte absurdo:
Antes de começar, deixe-me falar sobre minha experiência de aprender o front-end até agora. Deve ser cerca de dois meses hoje. Basicamente, leva de 6 a 10 horas de estudo todos os dias, puramente auto-estudo, e diz-se que o treinamento não é confiável! Atualmente, estou aprendendo apenas três itens principais (HTML5, CSS3, JavaScript) e todo outro conhecimento ainda está classificado por trás do plano de aprendizado ... Estou em um período de confusão e não sei o que aprender primeiro! Não importa o quê, vamos resolver os três itens principais primeiro. Se você tem boas sugestões, espero que você possa me dar alguns conselhos!
Do HTML5 ao CSS3, senti que o front-end era bastante simples, então me senti um pouco confiante e motivado. Então eu aprendi JS. Eu costumava aprender C# e Swift da Apple. Eles são idiomas fortes e orientados a objetos, que são relativamente avançados. No entanto, eu ainda gosto do front-end, então me virei aqui e comecei a aprender JS. Foi fácil, mas senti que esse idioma era um pouco confuso e diferente dos outros! Há algumas coisas que não são fáceis de entender no guia autoritário. Se você não puder fazer isso, olhe mais sobre o Baidu e observe mais o entendimento de outras pessoas sobre conceitos como fechamentos e protótipos e, gradualmente, você pode dominá -los. Nesta fase, você pode ter percebido gradualmente que o front-end inclui muitas coisas! Há um monte de bibliotecas, estruturas, etc. e muitas outras coisas. Em suma, novos substantivos continuam aparecendo na frente dos seus olhos. Alguns dizem que isso vai ficar desatualizado e isso está prestes a ser mainstream, o que é tão caótico! Muito bagunçado! Como devo ir a seguir? O que aprender primeiro? O que aprender mais tarde?
Atualmente estou nesta fase. Às vezes, não suporto assistir nada por dois dias consecutivos, não consigo dormir e me sinto chateado, ou seja, estou obcecado por isso!
Eu apenas pensei, o que há de errado comigo? Eu não consigo descobrir! Esqueça, faça uma pausa e exercite seu corpo! Basta correr e passear! Enquanto pensa: como voltar ao estado!
Mais tarde, fiz isso: dê a si mesmo um doce! (Faça alguns exemplos simples por você)
Descobri que o doce é tão doce que eu posso realmente fazê -lo! A sensação de realização é de lazer e a motivação está cheia! Acabei de escrever uma instância após a outra. Se eu não entendi ou não estiver familiarizado com a API, traduzirei o documento (vou escrevê -lo antes de ler o código de outras pessoas e o lerei novamente se realmente não puder). Gradualmente, senti que estava realmente de volta e comecei a entrar na pista!
Também dei uma olhada em que tipo de pessoas a maioria das empresas que atualmente estão recrutando empresas de front-end precisam e depois fiz um novo plano de estudo para mim. Obviamente, como tenho tempo agora, quero levar algum tempo para consolidar as três principais fundações primeiro, praticar mais e depois voltar e ler os documentos novamente para entender seus princípios básicos e internos! Não importa o que você aprenda a seguir, será muito mais fácil começar! Ao mesmo tempo, continue a entender mais o front-end! Compreender as perspectivas e a direção dessa profissão é estabelecer uma visão de mundo do front-end para si mesmo, para que você não perca sua direção quando aprender!
Quanto a quais bibliotecas e estruturas de terceiros devem ser aprendidas, não sei no momento. JQ está desatualizado? Você precisa aprender? Eu não sei, então não me importo mais com isso, basta brincar com o nativo primeiro! Você deve saber naturalmente no futuro!
O combate real começa, o seguinte é o código e a demonstração.
Não posso aprender o método de escrita orientado a objetos dos meus idosos no momento, então só posso escrever algumas funções, haha! (A imagem vem da Internet. Você também pode cortar uma foto de 300*200 para ver o efeito. Clique no botão 'Grade and Out' para iniciar)
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; preenchimento: 0; estilo de lista: nenhum; Decoração de texto: Nenhum; } #slide {Position: Absolute; topo: 100px; Esquerda: 50px; Largura: 300px; Altura: 200px; borda: 1px cinza sólido; } #slide .blog-name {display: block; Posição: Absoluto; Inferior: 0; Esquerda: 0; largura: 100%; Altura: 25px; altura de linha: 25px; Background-Color: RGBA (155.155,155,0.5); Z-Index: 4; Cursor: Ponteiro; Indente de texto: 3px; } #slide-nav {position: absoluto; Direita: 5px; Inferior: 5px; Index z: 5; } #slide-nav li {display: inline-block; Largura: 16px; Alinhamento de texto: centro; altura da linha: 16px; Radio de fronteira: 5px; Cursor: Ponteiro; estouro: oculto; } #slide-nav li: mouse, .Selected {Background-Color: #336699; Cor: Branco; } .slide-content1 {posição: absoluto; Largura: 300px; Altura: 200px; tamanho de fonte: 0; } .slide-content1 a {posição: absoluto; Cursor: Ponteiro; } .slide-content1 a: visitado {color: preto;} #modelo-btn {position: absoluto; topo: -25px; Size da fonte: 20px; } </style> <cript> window.onload = function () {var sufuImagescrooller = function () {// várias funções de ferramenta Função mostram (img) {var id; for (var i = 0; i <= 21; i ++) {var o op = i * 5; id = setTimeout (function (e) {Setopacity (img, e)} .bind (this, op), i * 50); } ClearTimeout (id); } function hide (img) {var id; for (var i = 0; i <= 21; i ++) {var op = 100 - i * 5; id = setTimeout (function (e) {Setopacity (img, e)} .bind (this, op), i * 20); } ClearTimeout (id); } função getById (id) {return document.getElementById (id); } função setopacity (elem, nível) {if (elem.filter) {elem.style.filter = "alpha (opacity =" + nível + ")"; // compatível com ie} else {elem.style.opacity = nível/100; }} // (modo avançado e progressivo) Função do corpo Função Inoutmodel (NUMS, NAVID, IMGCONTAINERID, imginfoid, atraso) {// Prevenir vários cliques do botão de seleção de modo para criar mais li se (getById ('slide-nav'). ChildElementCount! == 0) {return} // var Targetidext = 0; // Salvar informações de status da imagem var currentidext = 0; // Salvar informações sobre status da imagem var = document.createCumentFragment (); for (var i = 0; i <nums; i ++) {navegação [i] = fragment.appendChild (document.createElement ('li')); // Método AppendChild retornará o Li Nav [i] .innerhtml = i+1; } getById (NAVID) .AppendChild (frag); // inicialize para exibir a primeira imagem var iMgs = getById (imgContainerID) .getElementsByTagName ('a'); var info = getById (imginfoid); info.innerhtml = imgs [0] .title.slice (0,12)+'...'; NAV [0] .className = 'Selected'; // alteração dinâmica do nome da classe de Li para alterar seu estilo para (var j = 1; j <nav.length; j ++) {Setapacity (imgs [j], 0); } // Iniciar o carrossel automático var id; function start (atraso) {id = setInterval (function () {hide (imgs [cureEntidext]); nav [cureEntidext] .className = ''; if (Targetidext <nums-1) {Targetidext ++;} else {Targetidext = 0;} Humentidext = (Mostrar; Mostrar (IMGS; info.innerhtml = imgs [Targetidext] .title.slice (0,12)+'...'; } start (atraso); // Adicione o evento para cada botão de navegação para (var k = 0; k <nav.length; k ++) {Nav [k] .OnClick = function (event) {var e = event || window.event; // compatível com ie var t = event.target || event.srcelement; // compatível com ie var idex = parseint (t.innerhtml) -1; console.log ('idex:'+idex+'t:'+Targetidext+'c:'+cureentidext); if (idex === humen [cureentidext]); NAV [CureEntidext] .className = ''; humenidext = idex; show (imgs [idex]); NAV [idex] .className = 'Selected'; info.innerhtml = imgs [idex] .title.slice (0,12)+'...'; }} getById (NAVID) .onMouseOver = function () {ClearInterval (id)}; getById (NAVID) .onMouseOut = function () {start (atraso)}; } // da função do modo direita para esquerda de Ardempodel (NUMS, NAVID, imgContainerID, imginfoid, atraso) {alert ('Blogger é preguiçoso, esqueci de implementar esta função! Deixe uma mensagem se precisar!'); } função de TopModel (NUMS, NAVID, imgContainerID, imginfoid, atraso) {alert ('Blogger é preguiçoso, esqueci de implementar esta função! Deixe uma mensagem se precisar!'); } return {InoutModel: Inoutmodel, FromLightModel: FromLightModel, FromtopModel: FromTopModel: FromTopModel, getById: getById}} (); sufuImagescrooller.getbyId ('Model-BTN1'). OnClick = function () {sufuImagescrooller.inoutmodel (5, 'slide-nav', 'slide-main', 'slide-info', 3500); }; sufuImagescrooller.getbyId ('Model-BTN2'). OnClick = function () {sufuImagesCrooller.FromStizElModel (5, 'slide-NAV', 'slide-main', 'slide-info', 3500); }; sufuimagescrooller.getbyId ('Model-BTN3'). OnClick = function () {sufuImagescrooller.FromtopModel (5, 'slide-Nav', 'slide-main', 'slide-info', 3500); }; }; </script> </ad Head> <body> <div id = "slide"> <a id = "slide-info" href = "http://www.cnblogs.com/susufufu/" Target = "_ Blank"> blog de sufu </a> <ul Id = "slide href = "http://www.cnblogs.com/susufufu/p/5749922.html" Target = "_ Blank"> <div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=1247027539,1217965501&fm=21&gp=0.jpg"> </div> <aa> href = "http://www.cnblogs.com/susufufufu/p/5768431.html" Target = "_ Blank"> <div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=4286855119,2694540617&fm=21&gp=0.jpg"> </div> <aa> href = "http://www.cnblogs.com/susufufu/p/5738673.html" Target = "_ Blank"> <div> <img src = "https://ss3.bdstatic.com/70cfv8sh_q1ynxgkpowk1hf6hhy/it/u=4042865154,1782505495&fm=21&gp=0.jpg"> </div> <aa> href = "http://www.cnblogs.com/susufufu/p/5714020.html" Target = "_ Blank"> <div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=2603911195,1920098549&fm=21&gp=0.jpg"> </div> <aa> href = "http://www.cnblogs.com/susufufufu/p/5759480.html" Target = "_ Blank"> <div> <img src = "https://ss0.bdstatic.com/70cfuhsh_q1ynxgkpowk1hf6hhy/it/u=4104312586,1589909074&fm=21&gp=0.jpg" </div> type = "botão" id = "modelo-btn1" value = "progressivo gradual"> <input type = "button" id = "model-btn2" value = "direita para a esquerda"> <input type = "button" id = "model-btn3" value = "topo a baixo"> </div> </div> </body> </html>No começo, pense em como implementá -lo: você não usa o timer para alterar a imagem e alterar a opacidade da imagem no Cutstone?
1. O layout html é relativamente simples:
<ul id = "slide-nav" ></ul> <div id = "slide-main"> <a href = "" target = "_ blank"> <div> <img src = "lg1.png"> </div> </a> ... </div> ...
Slide-Info é usado para exibir o título da imagem. O slide-Nav é um botão digital, o slide-main é um recipiente de imagem e o link de imagem é colocado dentro.
Não há LI escrito na tag porque ela é criada dinamicamente através de JS;
2. Desde que você experimente as configurações dos estilos CSS, você as entenderá. Preste atenção a eles:
• Antes de fazer seu próprio layout, é melhor adicionar uma borda ao elemento pai, para que você possa entender a cena e finalmente removê -lo.
• Ul Li e muitas outras tags têm preenchimento por padrão, e tudo deve ser definido como 0;
*{margem: 0; preenchimento: 0; estilo de lista: nenhum; Decoração de texto: Nenhum; }Altura: 25px; e altura de linha: 25px; dois são iguais, para que os personagens possam ser centrados
O Z-Index é apenas em relação a seus irmãos e filhos e é inválido para parentes à margem. Se você deseja que seja exibido na frente de parentes à margem, crie os ancestrais de parentes à margem. Por exemplo, seu avô é o primeiro -ministro e seu segundo mestre é um fazendeiro, então todas as identidades de sua família são mais nobres do que todas as identidades da família do seu segundo mestre.
• Posição: absoluta; também está relacionado ao pai. Se seu pai não estabeleceu um posicionamento, não é confiável, então continue procurando apoio até encontrá -lo e, em seguida, confie nele para posicioná -lo!
• Se você deseja alcançar o efeito da direita para a esquerda, lembre-se do tamanho da fonte: 0; Seja claro sobre o espaçamento entre as fotos e mantenha as fotos ombro a ombro!
Como diz o ditado, a prática é perfeita. Somente quando o CSS é sólido, você pode controlar o layout! Por exemplo, o seguinte layout de asa dupla pode ser alcançada sem posicionar:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <yoy> body {margin: 0; preenchimento: 0; } .Header, .Footer {Width: 100%; Altura: 50px; altura da linha: 50px; Alinhamento de texto: centro; Background-Color: Greenyellow; } .Container {Overflow: Hidden; *zoom: 1; } .left {float: esquerda; Largura: 100px; Altura: 100px; margem -esquerda: -100%; Background-Color: verde; } .Main {float: esquerda; largura: 100%; Altura: 100px; Background-Color: cinza; } .right {float: esquerda; Largura: 200px; Altura: 100px; margem -esquerda: -200px; Background-Color: ouro; } .Center {Padding-Left: 100px; Right-right: 200px; } </style> </head> <body> <div> cabeçalho </div> <div> <div> main-center </div> </div> <div> esquerda </div> <div> direita </div> </div> <div> rodapé </div> </body> </html>Implementação do código
Escreva o esboço primeiro:
var sufuImageScrooller = function(){function getById(id){...} //Universal get element object function setOpacity(elem,level){...} //Set transparency function hide(img){...} //Fake in function show(omg){...} //Fake out function inOutModel(nums,navId,imgContainerId,imgInfoId,delay){ ... } // O corpo da função principal retorna {inoutModel: inoutmodel, ...}} ();Dessa forma, você pode chamar o método Inoutmodel através do sufuimagescrooller, sufuimagescrooller. inoutmodel (5, 'slide-nav', 'slide-main', 'slide-info', 3500);
Parâmetros Inoutmodel (NUMS, NAVID, imgContainerID, imginfoid, atraso): O NUMS cria o número de Li, que deve corresponder ao número de imagens, ID de contêiner de botão digital Navid, ID do IMGContainerID Picture ID, IDGIONFOID Exibe o ID de informações do título da imagem, Especifica o tempo de atraso para alternar a figura;
Depois de escrever o esboço, ele está meio concluído. Os outros são a implementação de detalhes específicos. Eu não escrevi muito bem. Só posso dizer que implementei essa função. Todo mundo pensa sobre isso por si mesmos. Se você tiver boas sugestões, sinta -se à vontade para apresentá -lo;
Comece cortando a função Inoutmodel e depois vá profunda passo a passo. A chave é digitá -lo manualmente. Se você apenas olhar para ele, não terá essa experiência profunda!
Ok, esse é o ponto. Se você não sabe como traduzir a API do documento, também pode deixar uma mensagem para me perguntar
O artigo acima "O sentimento de realizar efeitos de carrossel a partir de JS + nativo de aprender o front-end (impedir a obsessão) é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.