Java Script dynamiczna zmiana tła Div'a

0

Jak mogę dynamicznie zmieniać tło diva na losowy obrazek z folderu co załóżmy 60 sekund.

style.css

        div#top_zdjecie {
	position: absolute;
	top: 0px;
	left: 7px;
	right: 13px;
        height: 180px;
        background: url("loga/1.jpg");
        z-index: 0;
}

Obrazki są w folderze loga/(1.jpg, 2.jpg, 3.jpg ...).
index.html

<div id="top_zdjecie"></div>
0

setInterval + document.getElementById('').style.backgroundImage (nie zapomnij o cssowym url()). Losowanie liczby - sprawdź google ;)

0

Zrobiłem coś takiego ale mi nie działa :)

<script language="JavaScript" type="text/javascript">
		document.getElementById('top_zdjecie').style.background="url('loga/3.jpg')";
</script>
<div id="top_zdjecie"></div>

Tak też nie działa:

<script language="JavaScript" type="text/javascript">
		document.getElementById('top_zdjecie').style.backgroundImage="url('loga/3.jpg')";
</script>
<div id="top_zdjecie"></div>
0

Na razie nie ma losowania :) chciałem po prostu zmienić obrazek tła z 1.jpg które jest ustawione na 3.jpg i jak to mi zadziała to zrobić losowanie :).

0

taki kawałek kodu zadziałał u mnie bez problemu

	function rotator(){
		document.getElementById('top_zdjecie').style.background="url('"+Math.floor(Math.random()*4)+".gif')";
	};
	setInterval("rotator()",1000);
0

nie dziwne, że Ci nie działa, skoro skrypt, który ma modyfikować element uruchamiasz przed jego utworzeniem... no nie?

i wywal atrybut language!!! To chyba nigdy nie otarło się o żadne standardy czy propozycje [?]

i skrypty wywołuj po pełnym załadowaniu strony - przeniesienie tego skryptu pod diva też nie da gwarancji jego działania.

albo robisz <body onload="skrypty();">, wcześniej dołączasz (niekoniecznie, ale tak jest wygodniej) zewnętrzny skrypt w którym definiujesz funkcję skrypty(). W ten sposób jesteś pewien, że dokument jest pobrany w całości i gotowy do akcji.

Jeszcze lepszą metodą jest użycie $(document).ready(); jeżeli includujesz jQuery, a jeżeli nie, to wystarczy Ci tylko to (klik)

0

A da się w JS zrobić płynną zmianę tła czy trzeba użyć JQuery ?

0

jQuery to tylko framework dla JS. Wszystko w jQuery jest do zrobienia w czystym js.
Płynnego przejścia tła nie ma w CSS, więc i javascript Ci nie pomoże.
Możesz jedynie narzucić dwa elementy na siebie (position: absolute się kłania) i zmieniać im przeźroczystość.
Możesz pisać prostą funkcję do animacji, albo użyć jQuery, gdzie animację robisz jednym poleceniem. Twój wybór ;)

0

Próbuje z JQuery :)

Sorka, że tak truje i pewnie robię podstawowe błędy ale napisałem taki kod.
Teraz działa w miarę dobrze ale przez chwile jest białe tło tzn przez 10sec. :). A wolałbym żeby zdjęcia się przenikały.

<script type="text/javascript">
        setInterval("rotator()",10000);
        var a=0;
		function rotator()
		{
				if(a==0) {$(document.getElementById('top_zdjecie')).fadeOut(10000);};
                if(a==1) {document.getElementById('top_zdjecie').style.background="url('loga/"+Math.floor(Math.random()*7)+".jpg')";};
                if(a==2) {$(document.getElementById('top_zdjecie')).fadeIn(10000); a=-1;};
                a++;
        };
</script>
0

poprawki do Twojego kodu i komentarze:

        setInterval(rotator,10000); // branie pierwszego argumentu w setInterval w cudzysłów to zło.
        // poczytaj przy okazji o funkcjach anonimowych (nie będziesz musiał tego używać, ale warto wiedzieć na przyszłość)
        var a=0;
                function rotator()
                {
                // stosuj wcięcia konsekwentnie ;)
                if(a==0) { $('#top_zdjecie').fadeOut(10000); } // patrz jaki jQuery ma fajny ("cssowy") selektor elementów, na których wykonujesz akcje ;) (średnik na końcu był zbędny)
                if(a==1) { $('#top_zdjecie').css({background: "url('loga/"+Math.floor(Math.random()*7)+".jpg')", fontSize: "10px"}); } // i ma dużo fajnych "skracaczy" - tutaj zastosowałem dwa style css na raz - bardziej przejrzyste, nie? ;) (fontSize wywal) --- przy okazji - warto dowiedzieć się co to JSON
                if(a==2) { $('#top_zdjecie').fadeIn(10000); a=-1;};
                a++;
        };

no i wspominałem o position: absolute; - też o tym poczytaj. potrzebujesz dwóch elementów, i one wzajemnie powinny się przenikać. podpowiedzi:

  1. rodzicowi #top_zdjecie nadaj position: relative (poczytaj, co robi)
  2. dodaj element #top_zdjecie2 - spraw, żeby się nakładały, ukryj w cssach jeden z nich
  3. poprawki w skrypcie - ukrytemu podmieniaj tło, potem ukrywaj widoczny i pokaż ukryty - i tak w kółko.
0

A jak mogę odwołać się do:

<div id="top_zdjecie" name="top_zdjecie1"></div>
		<div id="top_zdjecie" name="top_zdjecie2"></div>

diva o id="top_zdjecie" i name="top_zdjecie1"?

0

Nie możesz mieć dwóch elementów o tych samych identyfikatorach (atrybut "id"). Masz drobną pomyłkę, po prostu zamiast id wpisz name i zamiast name wpisz id. Jak już to poprawisz, to do <div id="aaa"> w jQuery dostaniesz się poprzez $("#aaa").

0

a po co Ci w ogóle name?

1 użytkowników online, w tym zalogowanych: 0, gości: 1