Forum PHP.pl > [JavaScript]Zmiana obrazka na sekundę

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Zmiana obrazka na sekundę

VishOne

18.04.2011, 15:55:00

Witam, potrzebuję prostego skryptu, który by zmieniał po wejściu na stronę obrazek na 1s, a następnie powracał do domyślnego. Niestety nie znam JS ani jQuery i dlatego potrzebuję pomocy. Osobiście wykonałbym to na tej zasadzie, że po wejściu na stronę skrypt zmieniałby styl DIV'a na inny, który by zawierał inne tło, a po podanym czasie (w tym przypadku 1 lub 2 sekundy) ponownie zmieniał klasę na poprzednią.

Ogólnie to dałbym coś takiego radę wykonać w JS ale nie wiem ja zaimplementować czas, który by po załadowaniu wszystkiego na stronie, zmieniał klasę DIV'a na określony czas i po tym czasie ponownie powracał do poprzedniej klasy.

Pozdrawiam

jaslanin

18.04.2011, 16:20:56

po załadowaniu strony:

[HTML] pobierz, plaintext 
<script>
    window.onload = function()
    {
        // cos do zrobienia po zaladowaniu strony
    }
</script>
[HTML] pobierz, plaintext

http://www.w3schools.com/js/js_timing.asp

VishOne

18.04.2011, 16:31:48

A mam jeszcze jedno pytanie, bo jak zrobić tak, że po załadowaniu strony zmieni się klasa to ten obrazek i tak będzie musiał się załadować i przy wolnym łączu lub obciążeniu serwera może wyniknąć sytuacja, w której ta sekunda nie wystarczy (o ile dobrze rozumiem ten cały mechanizm wczytywane jest tylko to co widoczne), dałoby radę jakoś załadować, że tak powiem "z góry" dany obrazek?

pmir13

18.04.2011, 16:58:57

[HTML] pobierz, plaintext 
<html>
<head>
 
<style type="text/css">
  DIV { margin:auto; width:200px;height:100px; }
  DIV.pierwszy { background-image:url('obrazek1.jpg');}
  DIV.drugi { background-image:url('obrazek2.jpg');}
</style>
 
<script type="text/javascript">
var obrazki = new Array();
function preload()
{
  for (i=0; i<preload.arguments.length; i++)
  {
    obrazki[i] = new Image();
    obrazki[i].src = preload.arguments[i];
  }
}
 
preload("obrazek1.jpg","obrazek2.jpg" );
 
function zmien_obrazek()
{
  var image = document.getElementById('obrazek');
  if( image.className == 'pierwszy' )
    image.className = 'drugi';
  else 
    image.className = 'pierwszy';
  setTimeout('zmien_obrazek()', 1000);
}
</script> 
 
</head>
<body onLoad="setTimeout('zmien_obrazek()', 1000)">
<div id="obrazek" class="pierwszy">
</div>
</body>
</html>
[HTML] pobierz, plaintext

VishOne

18.04.2011, 18:39:36

Dzięki za napisanie skryptu, a dałoby radę jeszcze zatrzymać to po pierwszym wykonaniu bo niestety ale nie znam żadnych wbudowanych funkcji JS oprócz kilku podstawowych i nie wiem jakiej użyć.

Chodzi o to, aby po wejściu na stronę użytkownikowi mignął inny obrazek a później już był stały.

pmir13

18.04.2011, 20:52:01

Usuń linię 30.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.