Forum PHP.pl > Cykliczna zmiana wyświetlanych obrazków

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Cykliczna zmiana wyświetlanych obrazków

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

Fixer

8.01.2009, 16:55:27

Witam
Pomożecie w js bo zapętliłem się

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 
<img src="" alt="sd" border="0" id="losowa" onmouseover="stop=1" onmouseout="stop=0" />
 
<script language="javascript" type="text/javascript">
<!-- <![CDATA[
nr = 0;
img = new Array();
 
czas = 1000; // w milisekundach
//img[0] = {grafika:"maxthon1.gif", opis:"xxxxx", link:"1"};
img[0] = "maxthon1.gif";
img[1] = "google.gif";
 
for (i=0; i<img.length; i++) new Image().src = img[i];
 
function start() {
    document.getElementById("losowa").src = img[nr];
    nr++;
    if (nr>=img.length) nr=0;
    setTimeout("start()", czas)
}
 
/*
function start() {
  clearTimeout(id);
  if (stop==0) {
    document.getElementById("losowa").src = img[nr];
    nr++;
    ile = czas;
    if (nr>=img.length) {
      nr  = 0;
      ile = czasmiedzy;
    }
  }
  id = setTimeout("start()", ile);
}
*/
 
start();
// ]]> -->
</script>
[HTML] pobierz, plaintext

Rafal Filipek

8.01.2009, 17:28:52

dobrze czasami sobie przypomniec old sql js

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>

Fixer

8.01.2009, 23:08:24

fajny... bo krótki kodzik ale dalej jestem w punkcie wyjścia

Rafal Filipek

8.01.2009, 23:16:09

lenistwo do kwadratu

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function myImages(){
    var img = document.getElementById('obrazek'), link = document.getElementById('link'), cycle;
	var imgs = [
		{src:'1.png', desc:'Opis 1', link:'strona1.html'},
		{src:'2.png', desc:'Opis 2', link:'strona2.html'},
		{src:'3.png', desc:'Opis 3', link:'strona3.html'}
	];	
    img.onmouseover = function(){ clearInterval(cycle); }
    img.onmouseout = function(){ 
		cycle = setInterval(function(){
			var i = imgs[i=(imgs.push(imgs.shift())-1)];
			img.setAttribute('src', i.src);
			link.setAttribute('href', i.link);
			link.setAttribute('title', i.desc);
		},1000); 
	}
    img.onmouseout();
}
window.onload = function(){
	myImages();
}
</script>
</head>
<body>
	<a href="" title="" id="link"><img id="obrazek" src="" /></a>
</body>
</html>
[HTML] pobierz, plaintext

Fixer

8.01.2009, 23:43:24

Dzięki Rafale... o takie coś mi chodziło

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

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.