Projecto Final do tema JAVASCRIPT

[Rúben Periquito Developer]

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.

[M6]

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.

[Rúben Periquito Developer]

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

[antseq]

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

[M6]

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.

[Rúben Periquito Developer]

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 Developer]

repito: há coisas que ainda não aprendi

[Rúben Periquito Developer]

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 Developer]

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 Developer]

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?

[antseq]

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]

[Rúben Periquito Developer]

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 Developer]

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

[antseq]

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.

[Rúben Periquito Developer]

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 Developer]

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 Developer]

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

[Rúben Periquito Developer]

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

[antseq]

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,

[Rúben Periquito Developer]

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"