setTimeout() не работает, когда я добавляю img.style.opacity

У меня есть два изображения, наложенные друг на друга в моем HTML-файле, и вы хотите переключать их непрозрачность каждые 3 секунды в JS-файле, чтобы он переключался между ними. Я тестировал JS-файл без «img.style.opacity», и он просто зацикливался между функциями. Посмотрел, как это ..setTimeout() не работает, когда я добавляю img.style.opacity

function Step1(){ 
    alert("Step 1");  

    setTimeout(Step2(), 3000); 
} 

function Step2(){ 
    alert("Step 2"); 

    setTimeout(Step1(), 3000); 
}

И он показал "Шаг 1"> "Шаг 2"> "Шаг 1" так каждые 3 seonds.

Затем я добавил немного, и теперь это выглядит так.

var img1 = document.getElementById('img1'); 
var img2 = document.getElementById('img2'); 

function Step1(){ 
    // alert("Step 1"); 
    img1.style.opacity = "0"; 
    img2.style.opacity = "1"; 
    setTimeout(Step2(), 3000); 
} 

function Step2(){ 
    //alert("Step 2"); 
    img1.style.opacity = "1"; 
    img2.style.opacity = "0"; 
    setTimeout(Step1(), 3000); 
}

И теперь он будет работать только с шагом Step1() и не переходит в Step2().

Kinda новый для JS, извините, если ответ - это что-то сумасшедшее просто.

источник

2014-12-01 David Lawlor

'SetTimeout (Step2(), 3000)' 'будем называть Step2' *** *** сразу. 'setTimeout (Step2, 3000)' вызовет его через три секунды. –

В настоящее время вызываются как Step2(), так и Step1(), как только Step1() и Step2() вызываются соответственно. Нет 3-секундного ожидания.

Вы должны передать функцию setTimeout() по ссылке (IE: Без скобок):

var img1 = document.getElementById('img1'); 
var img2 = document.getElementById('img2'); 

function Step1(){ 
    // alert("Step 1"); 
    img1.style.opacity = "0"; 
    img2.style.opacity = "1"; 
    setTimeout(Step2, 3000); 
} 

function Step2(){ 
    //alert("Step 2"); 
    img1.style.opacity = "1"; 
    img2.style.opacity = "0"; 
    setTimeout(Step1, 3000); 
}

JSFiddle

источник

2014-12-01 13:16:26 George

Все еще не работает для меня, к сожалению. Только Step1, все еще .. –

Кажется, что работает ОК здесь: http://jsfiddle.net/faemf5L2/ – George

Ну, это что-то вроде разочарования. Понятно, что он должен работать! Я буквально копировал/вставлял это в свой файл и все еще отказываюсь работать, только загружая Step1 ... –

Просто можно сделать, как этот

setInterval(function() { 
var img1 = document.getElementById('img1'); 
var img2 = document.getElementById('img2'); 

    if (img1.style.opacity == "0";){ 
    img1.style.opacity = "1"; 
    img2.style.opacity = "0"; 
    } 
    else if(img2.style.opacity == "0") { 
    img1.style.opacity = "0"; 
    img2.style.opacity = "1"; 
    } 
    else { 
    img2.style.opacity = "0"; 
    img2.style.opacity = "1"; 
    } 

}, 3000);

Убедитесь, что нагрузка в этом интервал после готовности документа.

источник

2014-12-01 13:42:54

попробовать использовать это:

<script> 
var img1; 
var img2; 

function Step1(){ 
    img1 = document.getElementById('img1');// after load of page these id's will be available get them in declared varaibles to use 
    img2 = document.getElementById('img2'); 
    img1.style.opacity = "0"; 
    img2.style.opacity = "1"; 
    setTimeout(Step2, 3000); 
} 

function Step2(){ 
    //alert("Step 2"); 
    img1.style.opacity = "1"; 
    img2.style.opacity = "0"; 
    setTimeout(Step1, 3000); 
} 


</script> 
<body onload="Step1()"> <!-- call your Step1() function after load of page--> 

<img src="http://placehold.it/200x200" id="img1"> 
<img src="http://placehold.it/200x200" id="img2"> 
</body>

источник

2014-12-01 13:44:00

Опишите, что вы изменили и почему. –

@NiettheDarkAbsol сделано сэр. Спасибо за ваш комментарий. –

setTimeout() не работает, когда я добавляю img.style.opacity

ответ

Смежные вопросы