Rúben Periquito Developer 3 Posted March 27, 2020 Report Share Posted March 27, 2020 devo fazer um projeto slider mas acho que ainda não me ensinaram tudo do que pedem... quem me pode desenrascar uma ajuda? PROJETO FINAL DO MÓDULO JAVASCRIPT Criação de um banner slider com Javascript Neste projeto vamos continuar a implementar o que aprendemos na secção de JavaScript e incluí-lo no projeto já existente que fizemos no módulo anterior de HTML5/CSS3. O nosso projeto consistia em criar as bases de uma loja online, com páginas, links e imagens. Nesta fase terá de implementar um banner rotativo com imagens (2 ou 3) na página inicial ou homepage (ficheiro index.html). Isto terá de ser feito com código JavaScript. Tem de seguir os seguintes passos: 1. Implementar um banner rotativo no index.html do nosso projeto usando JavaScript. Criar duas imagens, a destaque-home.png e a destaque-home-2.png que queremos trocar a cada 4 segundos; usa a função “setInterval” para fazê-lo. Há várias formas de implementar esta troca de imagens. Uma hipótese é manter um array com os valores possíveis para a imagem e um inteiro que guarda o banner atual. Crie um arquivo “banner.js” e não se esqueça de o adicionar ao HTML do index.html <script type="text/javascript" src="js/banner.js"></script> No ficheiro “banner.js tem de criar o código base javascript para o banner funcionar. 2. Crie um botão de pausa para parar a troca de banner. Dica: use o clearInterval para interromper a execução. 3. Crie um botão de play para reativar a troca dos banners. Rúben Periquito Link to post Share on other sites
M6 153 Posted March 28, 2020 Report Share Posted March 28, 2020 Coloca as tuas dúvidas e problemas de forma concreta. Despejares aqui o enunciado não permite que alguém te ajude uma vez que não se sabe quais são os problemas que tens. 10 REM Generation 48K! 20 INPUT "URL:", A$ 30 IF A$(1 TO 4) = "HTTP" THEN PRINT "400 Bad Request": GOTO 50 40 PRINT "404 Not Found" 50 PRINT "./M6 @ Portugal a Programar." Link to post Share on other sites
Rúben Periquito Developer 3 Posted March 28, 2020 Author Report Share Posted March 28, 2020 1 hora atrás, M6 disse: Coloca as tuas dúvidas e problemas de forma concreta. Despejares aqui o enunciado não permite que alguém te ajude uma vez que não se sabe quais são os problemas que tens. os problemas é: como faço o que está no enunciado? e ainda não aprendi tudo o que eles pedem................ Rúben Periquito Link to post Share on other sites
antseq 91 Posted March 28, 2020 Report Share Posted March 28, 2020 (edited) 48 minutos atrás, Rúben Periquito Developer disse: os problemas é: como faço o que está no enunciado? e ainda não aprendi tudo o que eles pedem................ já pensaste em seguir o que está enunciado: - criar página "index.html" (tens dúvidas?) - criar ficheiro “banner.js” (tens dúvidas?) - associar <script> “banner.js” ao "index.html" (tens dúvidas?) - ter duas imagens PNG (tens dúvidas?) - colocar uma das imagens PNG na página (tens dúvidas?) * se fizeres o que está acima, já tens 100% da base do projecto => só falta a implementação dos "banners": - fazer "algo" no "banner.js" para substituir as imagens... e tens várias dicas no enunciado (array, trocar a 4 seg, setinterval) (tens dúvidas?) - fazer "algo" no "banner.js" para por em pausa (pause) e continuar(play) na substituição das imagens.. e tens uma dica no enunciado (clearInterval) (tens dúvidas?) Edited March 28, 2020 by antseq Link to post Share on other sites
M6 153 Posted March 28, 2020 Report Share Posted March 28, 2020 50 minutes ago, Rúben Periquito Developer said: os problemas é: como faço o que está no enunciado? e ainda não aprendi tudo o que eles pedem................ Tens de ser claro e concreto, senão só vais ter repostas igualmente vagas e genéricas do tipo "faz um ponto de cada vez" ou algo assim. De certo já terás bases para começar a fazer alguma coisa. Ninguém te pediria para fazer um trabalho sem te ter ensinado algo primeiro. Começa a fazer e vai colocando as dúvidas e problemas concretos que tenhas. 10 REM Generation 48K! 20 INPUT "URL:", A$ 30 IF A$(1 TO 4) = "HTTP" THEN PRINT "400 Bad Request": GOTO 50 40 PRINT "404 Not Found" 50 PRINT "./M6 @ Portugal a Programar." Link to post Share on other sites
Rúben Periquito Developer 3 Posted March 28, 2020 Author Report Share Posted March 28, 2020 1 minuto atrás, M6 disse: Tens de ser claro e concreto, senão só vais ter repostas igualmente vagas e genéricas do tipo "faz um ponto de cada vez" ou algo assim. De certo já terás bases para começar a fazer alguma coisa. Ninguém te pediria para fazer um trabalho sem te ter ensinado algo primeiro. Começa a fazer e vai colocando as dúvidas e problemas concretos que tenhas. tenho estado com isto o dia todo xD algo de errado não está certo xD Rúben Periquito Link to post Share on other sites
Rúben Periquito Developer 3 Posted March 28, 2020 Author Report Share Posted March 28, 2020 repito: há coisas que ainda não aprendi Rúben Periquito Link to post Share on other sites
Rúben Periquito Developer 3 Posted March 28, 2020 Author Report Share Posted March 28, 2020 16 minutos atrás, M6 disse: Tens de ser claro e concreto, senão só vais ter repostas igualmente vagas e genéricas do tipo "faz um ponto de cada vez" ou algo assim. De certo já terás bases para começar a fazer alguma coisa. Ninguém te pediria para fazer um trabalho sem te ter ensinado algo primeiro. Começa a fazer e vai colocando as dúvidas e problemas concretos que tenhas. "Ninguém te pediria para fazer um trabalho sem te ter ensinado algo primeiro." o meu prof pede por exemplo, fazer um slider ele nem me ensinou isso Rúben Periquito Link to post Share on other sites
Rúben Periquito Developer 3 Posted March 28, 2020 Author Report Share Posted March 28, 2020 até eu já lhe disse algumas vezes que ele pede coisas nos testes que não ensina, este não é a primeira vez que isso acontece -.- Rúben Periquito Link to post Share on other sites
Rúben Periquito Developer 3 Posted March 28, 2020 Author Report Share Posted March 28, 2020 29 minutos atrás, antseq disse: olocar uma das imagens PNG na página (tens dúvidas?) colocar só uma imagem? mas é para colocar as 2 em um slider com o tempo e incorporar botões de "Next" e "Back" serei eu que li mal? Rúben Periquito Link to post Share on other sites
antseq 91 Posted March 28, 2020 Report Share Posted March 28, 2020 24 minutos atrás, Rúben Periquito Developer disse: colocar só uma imagem? mas é para colocar as 2 em um slider com o tempo e incorporar botões de "Next" e "Back" serei eu que li mal? se tiveres por exemplo só isto <button><img><button> - só tens 1 imagem visível de cada vez [forma simplista] [* o próprio enunciado clarifica "Há várias formas de implementar esta troca de imagens"] [* não sei se sabes usar DIV, UL, etc + CSS para outros tipos de implementação...] - tens de fazer a funcionalidade de trocar o img.src de x em x segundos [forma simplista] - tens de fazer algo com os botões [salvo erro PAUSE e PLAY] Link to post Share on other sites
Rúben Periquito Developer 3 Posted March 28, 2020 Author Report Share Posted March 28, 2020 ainda não sei como criar o slider em si, como colocar lá imagens nem como as fazer trocar automaticamente com tempo perceberam? se eu percebesse tudo não vinha aqui fazer nada Rúben Periquito Link to post Share on other sites
Rúben Periquito Developer 3 Posted March 28, 2020 Author Report Share Posted March 28, 2020 2 horas atrás, antseq disse: já pensaste em seguir o que está enunciado: - criar página "index.html" (tens dúvidas?) - criar ficheiro “banner.js” (tens dúvidas?) - associar <script> “banner.js” ao "index.html" (tens dúvidas?) - ter duas imagens PNG (tens dúvidas?) - colocar uma das imagens PNG na página (tens dúvidas?) * se fizeres o que está acima, já tens 100% da base do projecto => só falta a implementação dos "banners": - fazer "algo" no "banner.js" para substituir as imagens... e tens várias dicas no enunciado (array, trocar a 4 seg, setinterval) (tens dúvidas?) - fazer "algo" no "banner.js" para por em pausa (pause) e continuar(play) na substituição das imagens.. e tens uma dica no enunciado (clearInterval) (tens dúvidas?) eu uso o fórum porque o meu prof me recomendou quando eu lhe perguntei o que fazia se houvesse algo que eu não conseguisse fazer............... certamente não foi para levar sermões eu não sou formado nisto, tenho um conhecimento mínimo nisto ainda Rúben Periquito Link to post Share on other sites
antseq 91 Posted March 28, 2020 Report Share Posted March 28, 2020 2 minutos atrás, Rúben Periquito Developer disse: eu uso o fórum porque o meu prof me recomendou quando eu lhe perguntei o que fazia se houvesse algo que eu não conseguisse fazer............... certamente não foi para levar sermões eu não sou formado nisto, tenho um conhecimento mínimo nisto ainda 1. a intenção foi ajudar... se acha que o meu texto/ajuda - passos a seguir - acima é um "sermão"... nem comento... 2. tb já te disseram que aqui no forum, ninguém te vai fazer a aplicação... 3. se tivesses seguido a minha ajuda (e de outros), e colocado aqui no forum o código da página html + js e com a dúvida de onde está "encravado" ou onde não consegue avançar, já o tinham dado + dicas de como resolver o problema. 4. até agora não mostraste 1 linha de código teu, nem html, nem js => em contrapartida já várias pessoas do forum, perderam o seu tempo para escrever linhas e linhas com indicações de por onde podes começar da minha parte, as minhas desculpas por algo que tenha dito e desejos de boa sorte no seu desenvolvimento. Link to post Share on other sites
Rúben Periquito Developer 3 Posted March 28, 2020 Author Report Share Posted March 28, 2020 (edited) 38 minutos atrás, antseq disse: já te disseram que aqui no forum, ninguém te vai fazer a aplicação... a ver se a gente se entende... 38 minutos atrás, antseq disse: se tivesses seguido a minha ajuda (e de outros), e colocado aqui no forum o código da página html + js e com a dúvida de onde está "encravado" ou onde não consegue avançar, já o tinham dado + dicas de como resolver o problema. segui os passos sim mas ainda não chegou lá, meter imagem SIMPLES sei eu meter.... 38 minutos atrás, antseq disse: até agora não mostraste 1 linha de código teu, nem html, nem js => em contrapartida já várias pessoas do forum, perderam o seu tempo para escrever linhas e linhas com indicações de por onde podes começar html: <!DOCTYPE html> <html> <head> <title>PROJETO FINAL DO MÓDULO JAVASCRIPT</title> <script type="text/javascript" src="banner.js"></script> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body> <div class="slideshow-container"></div> <div class="Slide"> <div class="numbertext">1 / 2</div> <img src="paisagem/destaque-home.png" alt="floresta" style="width:100%"> </div> <div class="Slide"> <div class="numbertext">2 / 2</div> <img src="paisagem/destaque-home-2.png" alt="floresta" style="width:100%"> </div> <div id="slide"></div> <input type="button" value="Play"> <input type="button" value="Stop"> </body> </html> JS: ainda em branco porque não entendo o que lá devo colocar para criar o slider... css externo: body { background-color: green; } Edited March 28, 2020 by Rúben Periquito Developer Rúben Periquito Link to post Share on other sites
Rúben Periquito Developer 3 Posted March 28, 2020 Author Report Share Posted March 28, 2020 preciso de ajuda apenas para IMPLEMENTAR O SLIDER E QUE ELE MUDE COM TEMPO OU COM BOTÕES NO CASO DE CLICAR NELES onde não me expressei correctamente? Rúben Periquito Link to post Share on other sites
Rúben Periquito Developer 3 Posted March 28, 2020 Author Report Share Posted March 28, 2020 porque não dizem como se faz? este fórum é para quê, mesmo? Rúben Periquito Link to post Share on other sites
Rúben Periquito Developer 3 Posted March 29, 2020 Author Report Share Posted March 29, 2020 tá quase xD só falta saber colocar o tempo para as imagens mudarem sozinhas... podem me ajudar? o código tá assim: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> html { border-top: 5px solid #fff; background: #f9f9f9; } #slider { position: relative; overflow: hidden; margin: 20px auto 0 auto; border-radius: 4px; } #slider ul { position: relative; margin: 0; padding: 0; height: 200px; list-style: none; } #slider ul li { position: relative; display: block; float: left; margin: 0; padding: 0; width: 1000px; height: 500px; background: #ccc; text-align: center; line-height: 300px; } a.control_prev, a.control_next { position: absolute; top: 40%; z-index: 999; display: block; padding: 4% 3%; width: auto; height: auto; background: #2a2a2a; color: #fff; text-decoration: none; font-weight: 600; font-size: 18px; opacity: 0.8; cursor: pointer; } a.control_prev:hover, a.control_next:hover { opacity: 1; -webkit-transition: all 0.2s ease; } a.control_prev { border-radius: 0 2px 2px 0; } a.control_next { right: 0; border-radius: 2px 0 0 2px; } .slider_option { position: relative; margin: 10px auto; width: 160px; font-size: 18px; } </style> </head> <body> <div id="slider"> <a href="#" class="control_next">Next</a> <a href="#" class="control_prev">Back</a> <ul> <li> <img src="paisagem/destaque-home.png"/> </a> </li> <li> <img src="paisagem/destaque-home-2.png"/> </a> </li> </div> <script> $(function() { $('#checkbox').change(function () { setInterval(function () { moveRight(); }, 2000); }); var slideCount = $('#slider ul li').length; var slideWidth = $('#slider ul li').width(); var slideHeight = $('#slider ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider').css({ width: slideWidth, height: slideHeight }); $('#slider ul').css({ width: sliderUlWidth, marginLeft: -slideWidth }); $('#slider ul li:last-child').prependTo('#slider ul'); function moveLeft() { $('#slider ul').animate({ left: +slideWidth }, 200, function () { $('#slider ul li:last-child').prependTo('#slider ul'); $('#slider ul').css('left', ''); }); }; function moveRight() { $('#slider ul').animate({ left: -slideWidth }, 200, function () { $('#slider ul li:first-child').appendTo('#slider ul'); $('#slider ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveLeft(); }); $('a.control_next').click(function () { moveRight(); }); }); </script> </body> </html> tá tudo no html xD Rúben Periquito Link to post Share on other sites
antseq 91 Posted March 29, 2020 Report Share Posted March 29, 2020 9 horas atrás, Rúben Periquito Developer disse: tá quase xD só falta saber colocar o tempo para as imagens mudarem sozinhas... podem me ajudar? o código tá assim: tá tudo no html xD 5 comentários: 1) se o código acima fosse feito por si... onde colocar o tempo seria o menor dos seus problemas. 2) para quem a menos de 24 horas dizia não saber nada e o professor não ensinar nada... escrever o código acima.... é praticamente impossível.. 3) mesmo que tenha tido uma epifania súbita, está a usar/recorrer a uma library "jQuery" ou seja uma biblioteca de funções "JavaScript". (e não puro "JavaScript"... nunca mencionou que seria para fazer com a utilização de "jQuery") 4) este seu código, salvo erro foi copiado "ipsis verbis" deste site "https://webframe.com.br/como-adicionar-um-slider-profissional-em-seu-site/". 5) o que é que o seu professor vai pensar de (2) (3) e (4)? cps, 2 Report Link to post Share on other sites
Rúben Periquito Developer 3 Posted March 29, 2020 Author Report Share Posted March 29, 2020 2 horas atrás, antseq disse: 5 comentários: 1) se o código acima fosse feito por si... onde colocar o tempo seria o menor dos seus problemas. 2) para quem a menos de 24 horas dizia não saber nada e o professor não ensinar nada... escrever o código acima.... é praticamente impossível.. 3) mesmo que tenha tido uma epifania súbita, está a usar/recorrer a uma library "jQuery" ou seja uma biblioteca de funções "JavaScript". (e não puro "JavaScript"... nunca mencionou que seria para fazer com a utilização de "jQuery") 4) este seu código, salvo erro foi copiado "ipsis verbis" deste site "https://webframe.com.br/como-adicionar-um-slider-profissional-em-seu-site/". 5) o que é que o seu professor vai pensar de (2) (3) e (4)? cps, ele próprio disse que podia recorrer a ajuda e que o google "is your friend" Rúben Periquito Link to post Share on other sites
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now