Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Cykliczna zmiana wyświetlanych obrazków, +modyfikacja skryptu
Fixer
post
Post #1





Grupa: Zarejestrowani
Postów: 123
Pomógł: 0
Dołączył: 24.10.2004
Skąd: TG

Ostrzeżenie: (0%)
-----

Witam
Pomożecie w js bo zapętliłem się (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)
Mam prosty skrypt JS który wyświetla cyklicznie fotki

Chcę zmodyfikowac ten skrypt tak aby:
1. Po najechaniu na obrazek (onmouseover) cykliczna zmiana zatrzyma się a po (onmouseout) włączy się.
2. <img src="" ... był pod skryptem js a nie tak jak jest teraz ze nad skryptem (innerHTML?)
3. w tablicy js oprócz nazwy pliku ma się znajdowac opis obrazka i link do innej strony

[HTML] pobierz, plaintext 
  1. <img src="" alt="sd" border="0" id="losowa" onmouseover="stop=1" onmouseout="stop=0" />
  2.  
  3. <script language="javascript" type="text/javascript">
  4. <!-- <![CDATA[
  5. nr = 0;
  6. img = new Array();
  7.  
  8. czas = 1000; // w milisekundach
  9. //img[0] = {grafika:"maxthon1.gif", opis:"xxxxx", link:"1"};
  10. img[0] = "maxthon1.gif";
  11. img[1] = "google.gif";
  12.  
  13. for (i=0; i<img.length; i++) new Image().src = img[i];
  14.  
  15. function start() {
  16.     document.getElementById("losowa").src = img[nr];
  17.     nr++;
  18.     if (nr>=img.length) nr=0;
  19.     setTimeout("start()", czas)
  20. }
  21.  
  22. /*
  23. function start() {
  24.   clearTimeout(id);
  25.   if (stop==0) {
  26.     document.getElementById("losowa").src = img[nr];
  27.     nr++;
  28.     ile = czas;
  29.     if (nr>=img.length) {
  30.       nr  = 0;
  31.       ile = czasmiedzy;
  32.     }
  33.   }
  34.   id = setTimeout("start()", ile);
  35. }
  36. */
  37.  
  38. start();
  39. // ]]> -->
  40. </script>
[HTML] pobierz, plaintext


Ten post edytował Fixer 8.01.2009, 17:13:12
Go to the top of the page
+Quote Post
Rafal Filipek
post
Post #2





Grupa: Zarejestrowani
Postów: 274
Pomógł: 54
Dołączył: 2.05.2006
Skąd: Nadarzyn

Ostrzeżenie: (0%)
-----

dobrze czasami sobie przypomniec old sql js (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<img id="obrazek" src="" />
<script type="text/javascript">
    var img = document.getElementById('obrazek'), imgs = ['1.png', '2.png', '3.png'], cycle;
    img.onmouseover = function(){ clearInterval(cycle); }
    img.onmouseout = function(){ cycle = setInterval(function(){img.setAttribute('src', imgs[imgs.push(imgs.shift())-1]);},1000); }
    img.onmouseout();
</script>
</body>
</html>
Go to the top of the page
+Quote Post
Fixer
post
Post #3





Grupa: Zarejestrowani
Postów: 123
Pomógł: 0
Dołączył: 24.10.2004
Skąd: TG

Ostrzeżenie: (0%)
-----

fajny... bo krótki kodzik ale dalej jestem w punkcie wyjścia
Go to the top of the page
+Quote Post
Rafal Filipek
post
Post #4





Grupa: Zarejestrowani
Postów: 274
Pomógł: 54
Dołączył: 2.05.2006
Skąd: Nadarzyn

Ostrzeżenie: (0%)
-----

lenistwo do kwadratu (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. function myImages(){
  6.     var img = document.getElementById('obrazek'), link = document.getElementById('link'), cycle;
  7. 	var imgs = [
  8. 		{src:'1.png', desc:'Opis 1', link:'strona1.html'},
  9. 		{src:'2.png', desc:'Opis 2', link:'strona2.html'},
  10. 		{src:'3.png', desc:'Opis 3', link:'strona3.html'}
  11. 	];	
  12.     img.onmouseover = function(){ clearInterval(cycle); }
  13.     img.onmouseout = function(){ 
  14. 		cycle = setInterval(function(){
  15. 			var i = imgs[i=(imgs.push(imgs.shift())-1)];
  16. 			img.setAttribute('src', i.src);
  17. 			link.setAttribute('href', i.link);
  18. 			link.setAttribute('title', i.desc);
  19. 		},1000); 
  20. 	}
  21.     img.onmouseout();
  22. }
  23. window.onload = function(){
  24. 	myImages();
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. 	<a href="" title="" id="link"><img id="obrazek" src="" /></a>
  30. </body>
  31. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Fixer
post
Post #5





Grupa: Zarejestrowani
Postów: 123
Pomógł: 0
Dołączył: 24.10.2004
Skąd: TG

Ostrzeżenie: (0%)
-----

Dzięki Rafale... o takie coś mi chodziło (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

mam do Ciebie jeszcze dwie prośby

1. jak to zapętlić... bo po wyświetleniu wszystkich obrazków rotacja zatrzymuje się
2. jak zrobić by przy pierwszym otwarciu pierwszym wyświetlanym obrazkiem był ten z tablicy

Ten post edytował Fixer 9.01.2009, 00:21:54
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 18:21
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn