Jump to content
Rúben Periquito Developer

Projecto Final do tema JAVASCRIPT

Recommended Posts

Rúben Periquito Developer

e eu não disse que ele não ensinava nada, eu disse que ele pede coisas nos testes que ainda não ensinou....

você está a criticar muito mais do que a ajudar

ou diz logo o que eu perguntei ou agradeço que não diga nada


Rúben Periquito 

Share this post


Link to post
Share on other sites
Rúben Periquito Developer

ele é especialista


Rúben Periquito 

Share this post


Link to post
Share on other sites
iron

Nesta área, a arrogância é a pior coisa que se pode ter.

Nunca ninguém se negou a ajudar, apenas tentar fazer com que fizesse uso de algo que se chama cérebro.

Quanto ao 

Citação

porque não dizem como se faz? este fórum é para quê, mesmo?

Este fórum é para ajudar, não dizer como se faz... Se quer que lhe digam como se fazem as coisas "de mão beijada", pode procurar outro fórum que lhe façam a "papinha" toda.

 

E pegando no que o @antseq disse, se pensarmos nos pontos: 2, 3 e 4, acho que existe um um pensamento fácil.

 

Para colocar o tempo, acho que deveria primeiro perceber o que o código que aí tem faz.

E sim, isto é um sermão!
 

  • Vote 1

Cumprimentos,
iron

Share this post


Link to post
Share on other sites
Rúben Periquito Developer
17 minutos atrás, iron disse:

Nesta área, a arrogância é a pior coisa que se pode ter.

Nunca ninguém se negou a ajudar, apenas tentar fazer com que fizesse uso de algo que se chama cérebro.

Quanto ao 

Este fórum é para ajudar, não dizer como se faz... Se quer que lhe digam como se fazem as coisas "de mão beijada", pode procurar outro fórum que lhe façam a "papinha" toda.

 

E pegando no que o @antseq disse, se pensarmos nos pontos: 2, 3 e 4, acho que existe um um pensamento fácil.

 

Para colocar o tempo, acho que deveria primeiro perceber o que o código que aí tem faz.

E sim, isto é um sermão!
 

foi o @antseq que veio com respostas fora daquilo que eu pedi eu estou de boa, qual arrogância?

foi o meu prof que me disse que podia pedir aqui ajuda, enquanto o @antseqsó vem dizer que o código não é meu blá blá blá...

se o código fosse copiado eu copiava de um site em que já trazia o tempo..........

e mesmo que fosse copiado, não é para ganhar nada com ele................

já fiz bons sites no curso mas em nenhum site tive de fazer um site com um slider com controlos "play" e "pause" e com tempo como pedem.............


Rúben Periquito 

Share this post


Link to post
Share on other sites
M6

@Rúben Periquito Developer, poupa-nos o blá-blá-blá, há aqui pessoas que desenvolviam sites antes de tu nasceres e do CSS e do Javascript ter sido inventado...
Para quem anda nesta vida há anos, não é difícil compreender a discrepância entre o know-how e o código apresentado.
Sabes há quantos anos vêm temos pessoal que vem aqui ao fórum despejas um enunciado e a pedir para lhes fazer o trabalho e a dizer que não sabem disto e daquilo?
Nem sequer essa conversa do professor que pede coisas que não foram dadas é novidade para nós.

Queres saber a resposta ao teu problema?

Não é esta aqui porque o teu problema não é este, embora seja esta a resposta que procuras:

https://lmgtfy.com/?q=javascript+slider+how+to


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."

 

Share this post


Link to post
Share on other sites
antseq
2 horas atrás, Rúben Periquito Developer disse:

foi o meu prof que me disse que podia pedir aqui ajuda, enquanto o @antseqsó vem dizer que o código não é meu blá blá blá...

se o código fosse copiado eu copiava de um site em que já trazia o tempo..........

e mesmo que fosse copiado, não é para ganhar nada com ele................

Viva,

Pediu-me para não intervir mais... mas lá vem o meu nome à baila.... então aqui vai mais um comentário final:

a) o seu "mau" professor com ou sem manias, especialista ou não, teve o trabalho de escrever o enunciado com a "papinha" toda feita... os requisitos estão encadeados de forma lógica, donde se começa e donde se acaba, com "dicas" mais que óbvias de termos funcionais pelo meio.

a minha primeira AJUDA foi para leres o enunciado e seguir religiosamente cada um dos pontos:

  • 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?)

b) não tem problema nenhum copiar... também não há problema nenhum em admitir que copiou ("se o código fosse copiado?" wtf, ainda tens dúvidas que 2 pessoas que nunca se viram na vida, conseguem escrever as mesmas classes CSS, com as mesmas propriedades, com os mesmos nomes) [joga antes no euromilhões... tens uma sorte e pêras para probabilidades tão pequenas]

c) convém é copiar algo que seja útil... e principalmente algo que o próprio perceba o que copiou... por exemplo tenho dúvidas que fosse para usar "jQuery"?

Se sim (não está no enunciado) mas poderias ter dito logo a partida, visto que pode simplificar o projecto...

Se não, qual o interesse no teu código "jQuery" já apresentado?

d) já fizeste bons sites OK, copiaste algo da Internet OK, dominas o que copiaste OK, não sabes colocar os tempos NOK.. com muitas reticências.

Então o que é isto no teu código? não é um temporizador? e onde foste buscar o "#checkbox"?

    $('#checkbox').change(function () {
        setInterval(function () {
            moveRight();
        }, 3000);
    });

e) ainda a querer ajudar....

Se não é para usar "jQuery", livra-te do código que já tens de "jQuery" e começa algo simples, conforme pedido no enunciado.

Se é para usar "jQuery", na alínea d) está o teu problema do "play" (automático),  e para o "play"/"pause" manual está no enunciado o "setInterval" que já sabes usar (d) e o "clearInterval"

cps, 

 

Share this post


Link to post
Share on other sites
Rúben Periquito Developer

calma-lá não se zanguem, eu apenas não sei o que fazer e apenas vim pedir "ajuda" ou algo mais mas não venho nem para aqui nem para sitio nenhum fazer inimigos!!!!!!!!!!!!!!

se estão com algum problema com o que eu disse as minhas desculpas, mas epah, se não sei como proceder, querem que eu faça o quê?


Rúben Periquito 

Share this post


Link to post
Share on other sites
M6
13 hours ago, Rúben Periquito Developer said:

calma-lá não se zanguem, eu apenas não sei o que fazer e apenas vim pedir "ajuda" ou algo mais mas não venho nem para aqui nem para sitio nenhum fazer inimigos!!!!!!!!!!!!!!

se estão com algum problema com o que eu disse as minhas desculpas, mas epah, se não sei como proceder, querem que eu faça o quê?

Podes começar por ler a matéria dada.
Tenho muita dificuldade em acreditar que o enunciado seja todos sobre matéria não dada. Leia-se não acredito que no enunciado haja alguma coisa que não tenha sido dada.


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."

 

Share this post


Link to post
Share on other sites
Rúben Periquito Developer
3 horas atrás, M6 disse:

Podes começar por ler a matéria dada.
Tenho muita dificuldade em acreditar que o enunciado seja todos sobre matéria não dada. Leia-se não acredito que no enunciado haja alguma coisa que não tenha sido dada.

pronto..........calma

 


Rúben Periquito 

Share this post


Link to post
Share on other sites
M6
1 hour ago, Rúben Periquito Developer said:

pronto..........calma

 

Mas aqui ninguém está nervoso. :D
Como te disse, lidamos com situações dessas há anos, são cíclicas.
Se o pessoal ficasse nervoso por causa disso o fórum já não existia... :D

 


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."

 

Share this post


Link to post
Share on other sites
Rúben Periquito Developer
36 minutos atrás, M6 disse:

Mas aqui ninguém está nervoso. :D
Como te disse, lidamos com situações dessas há anos, são cíclicas.
Se o pessoal ficasse nervoso por causa disso o fórum já não existia... :D

 

ainda bem que tudo se resolveu :) tenho vos a dizer que bastou-me perguntar ao prof e ele deu-me a milagrosa ajuda 😂

agora é "só" montar o código 😂


Rúben Periquito 

Share this post


Link to post
Share on other sites
Rúben Periquito Developer

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: orange;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 2</div>
  <img src="paisagem/destaque-home-2.png" style="width:100%">
  <div class="text">Tuning Luxo</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 2<</div>
  <img src="paisagem/destaque-home.png" style="width:100%">
  <div class="text">BMW Tuning</div>
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides.style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots.className = dots.className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 4000); // Change image every 2 seconds
}
</script>

</body>
</html>

 

PORQUE É QUE AS "SETAS" NÃO FAZEM "AVANÇAR" NA IMAGEM OU "RETROCEDER"?


Rúben Periquito 

Share this post


Link to post
Share on other sites
antseq
17 horas atrás, Rúben Periquito Developer disse:

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

<span class="dot" onclick="currentSlide(1)"></span> 
<span class="dot" onclick="currentSlide(2)"></span> 

PORQUE É QUE AS "SETAS" NÃO FAZEM "AVANÇAR" NA IMAGEM OU "RETROCEDER"?

Viva,

As "setas" não estão a fazer nada, porque no código <script> falta a função "plusSlides(..)" o mesmo para a função "currentSlide(..)" usada nos "dots".

cps.

Share this post


Link to post
Share on other sites
Rúben Periquito Developer
1 hora atrás, antseq disse:

Viva,

As "setas" não estão a fazer nada, porque no código <script> falta a função "plusSlides(..)" o mesmo para a função "currentSlide(..)" usada nos "dots".

cps.

eu sempre sei qualquer coisa, apenas tava encalhado


Rúben Periquito 

Share this post


Link to post
Share on other sites
Rúben Periquito Developer

Tenho ficheiros de teste onde eu faço o código para experimentos e depois copio-o para o ficheiro “oficial”

Quero saber o que está mal neste trabalho:

Se vocêS o experimentarem notam que ao clicar nas “setas” algumas vezes, o trabalho fica “meio-bugado” porquê?

P.S- TEM O CÓDIGO HTML, CSS E JAVASCRIPT

CÓDIGO HTML:

 

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="teste.css">

<script type="text/javascript" src="teste.js"></script>

 

<meta name="viewport" content="width=device-width, initial-scale=1">

 

<style>

 

* {box-sizing: border-box}

body {font-family: Verdana, sans-serif; margin:0}

.mySlides {display: none}

img {vertical-align: middle;}

 

/* Slideshow container */

.slideshow-container {

  max-width: 1000px;

  position: relative;

  margin: auto;

}

 

/* Next & previous buttons */

.prev, .next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  padding: 16px;

  margin-top: -22px;

  color: orange;

  font-weight: bold;

  font-size: 18px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

  user-select: none;

}

 

/* Position the "next button" to the right */

.next {

  right: 0;

  border-radius: 3px 0 0 3px;

}

 

/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {

  background-color: rgba(0,0,0,0.8);

}

 

/* Caption text */

.text {

  color: #f2f2f2;

  font-size: 15px;

  padding: 8px 12px;

  position: absolute;

  bottom: 8px;

  width: 100%;

  text-align: center;

}

 

/* Number text (1/3 etc) */

.numbertext {

  color: #f2f2f2;

  font-size: 12px;

  padding: 8px 12px;

  position: absolute;

  top: 0;

}

 

/* The dots/bullets/indicators */

.dot {

  cursor: pointer;

  height: 15px;

  width: 15px;

  margin: 0 2px;

  background-color: #bbb;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.6s ease;

}

 

.active, .dot:hover {

  background-color: #717171;

}

 

/* Fading animation */

.fade {

  -webkit-animation-name: fade;

  -webkit-animation-duration: 1.5s;

  animation-name: fade;

  animation-duration: 1.5s;

}

 

@-webkit-keyframes fade {

  from {opacity: .4}

  to {opacity: 1}

}

 

@keyframes fade {

  from {opacity: .4}

  to {opacity: 1}

}

 

/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {

  .prev, .next,.text {font-size: 11px}

}

</style>

</head>

<body>

 

<div class="slideshow-container">

 

<div class="mySlides fade">

  <div class="numbertext">1 / 2</div>

  <img src="paisagem/destaque-home-2.png" style="width:100%">

  <div class="text">Tuning Luxo</div>

</div>

 

<div class="mySlides fade">

  <div class="numbertext">2 / 2<</div>

  <img src="paisagem/destaque-home.png" style="width:100%">

  <div class="text">BMW Tuning</div>

</div>

 

<a class="prev" onclick="plusSlides(-1)">&#10094</a>

<a class="next" onclick="plusSlides(1)">&#10095</a>

 

</div>

<br>

 

<div style="text-align:center">

  <span class="dot" onclick="currentSlide(1)"></span>

  <span class="dot" onclick="currentSlide(2)"></span>

</div>

 

<script>

var slideIndex = 0;

showSlides();

 

function showSlides() {

  var i;

  var slides = document.getElementsByClassName("mySlides");

 var dots = document.getElementsByClassName("dot");

  for (i = 0; i < slides.length; i++) {

    slides.style.display = "none"; 

  }

  slideIndex++;

  if (slideIndex > slides.length) {slideIndex = 1}   

  for (i = 0; i < dots.length; i++) {

    dots.className = dots.className.replace(" active", "");

  }

  slides[slideIndex-1].style.display = "block"; 

  dots[slideIndex-1].className += " active";

  setTimeout(showSlides, 2000); // Change image every 2 seconds

}

</script>

 

</body>

</html>

 

CÓDIGO CSS:

 

 

* {box-sizing:border-box}

 

body {

  background-color: #2C3E50;

}

 

/* Slideshow container */

.slideshow-container {

  max-width: 1000px;

  position: relative;

  margin: auto

  background: #000;

  overflow: hidden;

}

 

/* Hide the images by default */

.mySlides {

  display: none;

}

 

/* Next & previous buttons */

.prev, .next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  margin-top: -22px;

  padding: 16px;

  color: orange;

  font-weight: bold;

  font-size: 18px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

  user-select: none;

}

 

/* Position the "next button" to the right */

.next {

  right: 0;

  border-radius: 3px 0 0 3px;

}

 

/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {

  background-color: rgba(0,0,0,0.8);

}

 

/* Caption text */

.text {

  color: #f2f2f2;

  font-size: 15px;

  padding: 8px 12px;

  position: absolute;

  bottom: 8px;

  width: 100%;

  text-align: center;

}

 

CÓDIGO JAVASCRIPT:

 

var slideIndex = 1;

showSlides(slideIndex);

 

// Next/previous controls

function plusSlides(n) {

  showSlides(slideIndex += n);

}

 

// Thumbnail image controls

function currentSlide(n) {

  showSlides(slideIndex = n);

}

 

function showSlides(n) {

  var i;

  var slides = document.getElementsByClassName("mySlides");

  var dots = document.getElementsByClassName("dot");

  if (n > slides.length) {slideIndex = 1}

  if (n < 1) {slideIndex = slides.length}

  for (i = 0; i < slides.length; i++) {

      slides.style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

      dots.className = dots.className.replace(" active", "");

  }

  slides[slideIndex-1].style.display = "block";

  dots[slideIndex-1].className += " active";

}


Rúben Periquito 

Share this post


Link to post
Share on other sites
Rúben Periquito Developer

alguém me pode ajudar?


Rúben Periquito 

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.