Rúben Periquito Developer Posted March 27, 2020 at 11:28 PM Report Share #617738 Posted March 27, 2020 at 11:28 PM 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 comment Share on other sites More sharing options...
M6 Posted March 28, 2020 at 03:26 PM Report Share #617739 Posted March 28, 2020 at 03:26 PM 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 comment Share on other sites More sharing options...
Rúben Periquito Developer Posted March 28, 2020 at 05:04 PM Author Report Share #617741 Posted March 28, 2020 at 05:04 PM 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 comment Share on other sites More sharing options...
antseq Posted March 28, 2020 at 05:52 PM Report Share #617742 Posted March 28, 2020 at 05:52 PM (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 at 06:02 PM by antseq Link to comment Share on other sites More sharing options...
M6 Posted March 28, 2020 at 05:57 PM Report Share #617743 Posted March 28, 2020 at 05:57 PM 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 comment Share on other sites More sharing options...
Rúben Periquito Developer Posted March 28, 2020 at 06:00 PM Author Report Share #617744 Posted March 28, 2020 at 06:00 PM 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 comment Share on other sites More sharing options...
Rúben Periquito Developer Posted March 28, 2020 at 06:12 PM Author Report Share #617745 Posted March 28, 2020 at 06:12 PM repito: há coisas que ainda não aprendi Rúben Periquito Link to comment Share on other sites More sharing options...
Rúben Periquito Developer Posted March 28, 2020 at 06:15 PM Author Report Share #617746 Posted March 28, 2020 at 06:15 PM 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 comment Share on other sites More sharing options...
Rúben Periquito Developer Posted March 28, 2020 at 06:20 PM Author Report Share #617747 Posted March 28, 2020 at 06:20 PM 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 comment Share on other sites More sharing options...
Rúben Periquito Developer Posted March 28, 2020 at 06:23 PM Author Report Share #617748 Posted March 28, 2020 at 06:23 PM 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 comment Share on other sites More sharing options...
antseq Posted March 28, 2020 at 06:55 PM Report Share #617749 Posted March 28, 2020 at 06:55 PM 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 comment Share on other sites More sharing options...
Rúben Periquito Developer Posted March 28, 2020 at 08:15 PM Author Report Share #617750 Posted March 28, 2020 at 08:15 PM 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 comment Share on other sites More sharing options...
Rúben Periquito Developer Posted March 28, 2020 at 08:18 PM Author Report Share #617751 Posted March 28, 2020 at 08:18 PM 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 comment Share on other sites More sharing options...
antseq Posted March 28, 2020 at 08:29 PM Report Share #617752 Posted March 28, 2020 at 08:29 PM 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 comment Share on other sites More sharing options...
Rúben Periquito Developer Posted March 28, 2020 at 09:06 PM Author Report Share #617753 Posted March 28, 2020 at 09:06 PM (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 at 09:09 PM by Rúben Periquito Developer Rúben Periquito Link to comment Share on other sites More sharing options...
Rúben Periquito Developer Posted March 28, 2020 at 09:11 PM Author Report Share #617754 Posted March 28, 2020 at 09:11 PM 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 comment Share on other sites More sharing options...
Rúben Periquito Developer Posted March 28, 2020 at 11:06 PM Author Report Share #617755 Posted March 28, 2020 at 11:06 PM porque não dizem como se faz? este fórum é para quê, mesmo? Rúben Periquito Link to comment Share on other sites More sharing options...
Rúben Periquito Developer Posted March 29, 2020 at 02:14 AM Author Report Share #617756 Posted March 29, 2020 at 02:14 AM 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 comment Share on other sites More sharing options...
antseq Posted March 29, 2020 at 11:56 AM Report Share #617757 Posted March 29, 2020 at 11:56 AM 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 comment Share on other sites More sharing options...
Rúben Periquito Developer Posted March 29, 2020 at 02:13 PM Author Report Share #617758 Posted March 29, 2020 at 02:13 PM 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 comment Share on other sites More sharing options...
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