Javascript Como mudar a src de uma imagem sem atualizar a página a cada 2 segundos em JS?

Eduardo de Quadros · 16 de março de 2019

Meu https://www.eduardodequadros.com/tecninfo/lista_cursos_ti/curso1_aula1.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Eduardo de Quadros - Tecnologia da Informação - Curso 1 - Aula 1</title>
    <link type="img/x-icon" rel="icon" href="https://www.eduardodequadros.com/assets/img/icon.ico">
    <link type="text/css" rel="stylesheet" href="https://www.eduardodequadros.com/assets/style.css">
    <script type="text/javascript" src="https://www.eduardodequadros.com/assets/script.js"></script>
</head>
<body>
<header>
    <div class="logo"><img onload="decimalOrigem(this);" src="https://www.eduardodequadros.com/assets/img/logo.png"></div>
</header>
<br>
<p class="apenas_link texto_grande">
    <a href="https://www.eduardodequadros.com/tecninfo/lista_cursos_ti/lista_cursos_ti.html">Página Anterior</a>
</p>
<br><h2>Aula 1 do Curso 1 de Tecnologia da Informação</h2>
<br>
<p>  O Sistema de Numeração Decimal é o sistema de numeração mais utilizado pelos
    seres humanos no mundo. Ele é também um dos 4 sistemas de numeração mais utilizados
    na Área de TI. Por que utilizamos o sistema decimal? Pois temos geralmente 10 dedos nas mãos. Se
    você está utilizando o sistema decimal, então você pode ler os números como
    a grande maioria dos brasileiros leem. Senão, se você está utilizando qualquer um dos
    outros sistemas de numeração mais utilizados na Área de TI, então você deve
    ler dígito por dígito. A cada 3 dígitos da direita para a esquerda só é
    permitido um separador nos números decimais.<br>  A base do sistema decimal é a base 10.
    Você pega o número decimal, coloca entre parênteses e escreve a base 10 subscrita à
    direita do fecha-parênteses.</p><br>
<div class="apenas_link"><img id="sistema_decimal_origem" width="600" src="https://www.eduardodequadros.com/assets/img/origem_decimal_final-23.png"></div>
</body>
</html>

Meu https://www.eduardodequadros.com/assets/script.js:

function decimalOrigem(img){
    setTimeout(origemDecimalFinal1(img), 4000);
    setTimeout(origemDecimalFinal2(img), 2000);
    setTimeout(origemDecimalFinal3(img), 2000);
    setTimeout(origemDecimalFinal4(img), 2000);
    setTimeout(origemDecimalFinal5(img), 2000);
    setTimeout(origemDecimalFinal6(img), 2000);
    setTimeout(origemDecimalFinal7(img), 2000);
    setTimeout(origemDecimalFinal8(img), 2000);
    setTimeout(origemDecimalFinal9(img), 2000);
    setTimeout(origemDecimalFinal10(img), 2000);
    setTimeout(origemDecimalFinal11(img), 2000);
    setTimeout(origemDecimalFinal12(img), 2000);
    setTimeout(origemDecimalFinal13(img), 2000);
    setTimeout(origemDecimalFinal14(img), 2000);
    setTimeout(origemDecimalFinal15(img), 2000);
    setTimeout(origemDecimalFinal16(img), 2000);
    setTimeout(origemDecimalFinal17(img), 2000);
    setTimeout(origemDecimalFinal18(img), 2000);
    setTimeout(origemDecimalFinal19(img), 2000);
    setTimeout(origemDecimalFinal20(img), 2000);
    setTimeout(origemDecimalFinal21(img), 2000);
    setTimeout(origemDecimalFinal22(img), 2000);
    setTimeout(origemDecimalFinal23(img), 2000);
    setTimeout(origemDecimalFinal24(img), 4000);
    
    decimalOrigem(img);
}

function origemDecimalFinal1(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-23.png"
}

function origemDecimalFinal2(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-22.png"
}

function origemDecimalFinal3(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-21.png"
}

function origemDecimalFinal4(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-20.png"
}

function origemDecimalFinal5(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-19.png"
}

function origemDecimalFinal6(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-18.png"
}

function origemDecimalFinal7(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-17.png"
}

function origemDecimalFinal8(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-16.png"
}

function origemDecimalFinal9(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-15.png"
}

function origemDecimalFinal10(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-14.png"
}

function origemDecimalFinal11(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-13.png"
}

function origemDecimalFinal12(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-12.png"
}

function origemDecimalFinal13(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-11.png"
}

function origemDecimalFinal14(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-10.png"
}

function origemDecimalFinal15(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-9.png"
}

function origemDecimalFinal16(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-8.png"
}

function origemDecimalFinal17(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-7.png"
}

function origemDecimalFinal18(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-6.png"
}

function origemDecimalFinal19(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-5.png"
}

function origemDecimalFinal20(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-4.png"
}

function origemDecimalFinal21(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-3.png"
}

function origemDecimalFinal22(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-2.png"
}

function origemDecimalFinal23(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-1.png"
}

function origemDecimalFinal24(img) {
    img.src = "https://www.eduardodequadros.com/assets/img/origem_decimal_final-0.png"
}

Eu quero 4 segundos da última pra primeira imagem e da primeira pra segunda. Quando o evento é onload, meu computador fica muito lento. Então qual evento devo usar?

washalbano · 18 de março de 2019

Olá!

segue sugestão:

script.js

// inicia um array pra guardar os nomes das imagens
var images = [];

var imagesTotal = 23;

// acrescenta os nomes das imagens numerados de 0 a 23
for (var i = 0; i <= imagesTotal; i++) {
    images.push('origem_decimal_final-' + i);
}

// define a primeira imagem a ser usada
var imageNow = imagesTotal;

function decimalOrigem() {
    // define a duração padrão de tempo
    var timeout = 2000;

    // se a imagem for a primeira ou a última
    if (imageNow == imagesTotal || imageNow == 0) {
        // terá o dobro de duração de tempo
        timeout = 4000;
    }

    // dispara a função que vai trocar as imagens
    image_change(images[imageNow]);

    // imagem anterior
    // se imageNow for menos que zero, então volta pra imagem 23
    imageNow = imageNow < 0 ? imagesTotal : imageNow - 1;

    // executar novamente essa função
    setTimeout(decimalOrigem, timeout);
}

// função para trocar as imagens
function image_change(img) {
    document.getElementById('sistema_decimal_origem').src = 'https://www.eduardodequadros.com/assets/img/' + img;
}

Coloque o onload na tag body:

<body onload="decimalOrigem();">

E a tag script antes de fechar a tag body, assim:

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

Entrar

Javascript Como mudar a src de uma imagem sem atualizar a página a cada 2 segundos em JS?

Posts recomendados

Eduardo de Quadros

washalbano

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos