Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: JAVASCRIPT jak zmieniać w pętli odnośniki obrazkowe?
Forum PHP.pl > Forum > Po stronie przeglądarki
nowy_pehapowiec
13.01.2010, 06:30:33
Jak zrobić pętlę w JAVASCRIPT, która podmieniałaby np co 30sekund odnośnik z obrazkiem? Czyli taka nieskończona pętla.

Wiem jak uzyskać gorszy efektem przy pomocy pętli if, sprawdzam czy liczba sekund aktualnego czasu jest większa czy mniejsza od 30 i odpowiedniemu odnośnikowi daje display block. Ale w ten sposób to jedynie dwa odnośniki zmieszczę w minucie. A chciałbym mieć ich np 5 i aby cała pętla trwała 2,5minuty. Jak to zrobić?

pozdor
Kshyhoo
13.01.2010, 08:57:33
Może tak (sama rotacja obrazków, dorób sobie linki):
[JAVASCRIPT] pobierz, plaintext 
  1. <script language="javascript" type="text/javascript">
  2. nr = 0;
  3. img = new Array();
  4.  
  5. czas = 30000;
  6. img[0] = "obraz1.gif";
  7. img[1] = "obraz2.gif";
  8. img[2] = "obraz3.gif";
  9.  
  10. for (i=0; i<img.length; i++) new Image().src = img[i];
  11.  
  12. function start() {
  13.   if (document.body) {
  14.     document.body.background = img[nr]; // body, albo inne cudo
  15.     nr++;
  16.     if (nr>=img.length) nr=0;
  17.     setTimeout("start()", czas)
  18.   }
  19. }
  20.  
  21. start();
  22. </script>
[JAVASCRIPT] pobierz, plaintext

Jeżeli body, to w stylach:
[CSS] pobierz, plaintext 
  1. body {
  2.   background-repeat: no-repeat;
  3.   background-position: center;
  4. }
[CSS] pobierz, plaintext
nowy_pehapowiec
14.01.2010, 09:18:36
Czy mógłbyś mi troszkę objaśnić ten kod? Bo nie chce mi działać ten kod. A chciałbym się dowiedzieć jak pisać takie skrypciki smile.gif

Szczególnie, te fragmenty:
new Image().src = img[i];

if (nr>=img.length) nr=0;
setTimeout("start()", czas);


questionmark.gif

pozdro
Kshyhoo
14.01.2010, 10:45:05
Na jakimkolwiek kursie JS dowiesz się wszystkiego, to podstawy. Jeżeli chcesz wstawić obrazek z odnośnikiem, wrzuć go w tablicę, tak jak wstawiłem obrazki...

EDIT: kompletna strona to przetestowania:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<meta name="keywords" content="...">
<meta name="description" content="...">
<title>news</title>

<link type="text/css" rel="stylesheet" href="pliki/style.css">
</head>
<body>

<div id="tutaj"></div>

<script language="javascript" type="text/javascript">
<!--

nr = 0;
czas = 30000; // w milisekundach (1 sekunda = 1000 ms)

txt = new Array();
txt[0] = "<a href=\"http://www.link1.pl\"><img src=\"obraz1.png\" alt=\"klik1\" width=\"116\" height=\"41\" border=\"0\" style: outline: none;/></a>";
txt[1] = "<a href=\"http://www.link2.pl\"><img src=\"obraz2.png\" alt=\"klik2\" width=\"116\" height=\"41\" border=\"0\" style: outline: none;/></a>";
txt[2] = "<a href=\"http://www.link3.pl\"><img src=\"obraz3.png\" alt=\"klik3\" width=\"116\" height=\"41\" border=\"0\" style: outline: none;/></a>";

function napis() {
document.getElementById("tutaj").innerHTML = txt[nr];
nr++;
if (nr>=txt.length) nr=0;
setTimeout("napis()",czas);
}

napis();
// -->
</script>

</body>
</html>
nowy_pehapowiec
15.01.2010, 14:19:32
Dzięki! Brakowało mi tego innerHTML. Mógłbyś mi polecić jakąś książkę albo kurs do js - na razie czytam fernate.pl

pozdr
trucksweb
15.01.2010, 14:20:40
lepszej lektury nie ma
http://api.jquery.com/
nowy_pehapowiec
19.01.2010, 11:41:58
A czy da się nadać płynności takiej "animacji? Dodać jakieś przenikanie się tych obrazków, albo zakrywanie jeden przez drugiego? I czy da się to zrobić bez dodatkowych bibliotek?

pozdro
skowron-line
19.01.2010, 11:48:30
Da się ale sporo kodu musiałbyś napisać. Biblioteki takie jak jQuery czy Mootools skracają czas pisania skryptu, a przy tym nie musisz się martwić że coś nie działa czy działa inaczej niż byś chciał pod różnymi przeglądarkami bo ktoś to sprawdził.
Chodź przyznam się że osobiście trafiłem na kilka ciekawych problemów w zabawie z Mootoolsem a co do jQuery to ktoś na forum pisał że nie wszystkie skrypty nawet te z manuala nie działają pod Operą.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.