ugrás a tartalomhoz

Javascript Galéria

superman · 2011. Júl. 28. (Cs), 15.17
Sziasztok, eddig soha nem használtam Javascriptet, csak HTML-t, és PHP-t, viszont most egy weboldalhoz kértek egy Javascript galériát a főoldalra. Elég egyszerűnek tűnik. Annyi a lényeg, hogy középen van a kép, két oldalt pedig nyilak, amivel lehet lapozni. Kicsit utánaolvastam, és ennyit tudtam megcsinálni belőle eddig:
A HEAD-ben levő rész:
<script language="javascript">
	i = 1;
	max = 3;
	function decrease()
	{
		if(i<=1)
		{
			i = max;
			load();
		}
		else
		{
			i--;
			load();
		}
	}
	function increase()
	{
		if(i>=max)
		{
			i = 1;
			load();
		}
		else
		{
			i++;
			load();
		}
	}
	function load()
	{
		alert(i);
	}
</script>
A BODY pedig így néz ki:

	<img src="images/leftarrow.png" align="left" style="padding-top: 162px; padding-left: 26px;" 	
onClick="decrease()"/>
	<img src="images/rightarrow.png" align="right" style="padding-top: 162px; padding-right: 
26px;" onClick="increase()"/>
	<center><img src="pictures/picture01.jpg" style="padding-top: 40px;"/></center>
Úgy működik, hogy ha a bal nyílra kattintunk, elindítja az increase() függvényt, ami hozzáad egyet az i változóhoz, ami a betöltött kép száma. A jobb nyíllal a decrease() függvény lép működésbe, ami elvesz egyet. Egy ellenőrzés után a load() függvényhez jutnak, amivel be szeretném töltetni a képet, viszont fogalmam sincs, hogy tudnám ezt már megcsinálni. Köszi előre is a segítséget, vagy a tanácsokat!
‹ Div elem nyúlás belső div hatására Néha meg nem jelenő weboldal ›
 ■
1

Mivel nem túl konkrét a

bb0072 · 2011. Júl. 28. (Cs), 15.37
Mivel nem túl konkrét a kérdés, a válasz sem lesz túl konkrét.

A képet úgy tudod betölteni, hogy megváltoztatod az <img> tag (objektum) src tulajdonságát.

Pl. az <img> id-je "galeriakep"

<img src="pictures/picture01.jpg" style="padding-top: 40px;" id="galeriakep"/>


var galeria_img = document.getElmentById('galeriakep');
galeria_img.src = "pictures/picture02.jpg";
2

Köszi a segítséget,

superman · 2011. Júl. 28. (Cs), 16.07
Köszi a segítséget, kipótoltam, megnéztem a dolgokat, amit írtál és már értem is, viszont nem váltja a képeket. Mutatom a HEAD-et:

	<script language="javascript">
		i = 1;
		max = 3;
		pic1 = "pictures/picture01.jpg";
		pic2 = "pictures/picture02.jpg";
		pic3 = "pictures/picture03.jpg";
		function decrease()
		{
			if(i<=1)
			{
				i = max;
				load();
			}
			else
			{
				i--;
				load();
			}
		}
		function increase()
		{
			if(i>=max)
			{
				i = 1;
				load();
			}
			else
			{
				i++;
				load();
			}
		}

		function load()
		{
			src = "pic"+i;
			var galeria_img = document.getElmentById('galeriakep');  
   			galeria_img.src = src;
		}
	</script>
A BODY-ban nem változtattam, csak a kép ID-nek megadtam a 'galeriakep' szót.
3

JavaScript

Poetro · 2011. Júl. 28. (Cs), 16.35
Mivel értéknek azt adod, hogy 'pic1', ennek nem sok értelme van. Jó lenne, ha elsajátítanál egy kis JavaScript kódolási stílust, valamint hogy hogyan működnek a változók, és miért rossz a globális változók használata. És használj valami JavaScript debuggert (IE: F12 Fejlesztői eszközök, Fx: Firebug, Chrome: Fejlesztői eszközök, Opera: Dragonfly).

Íme egy működő kód:
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style type="text/css">
    #left {
      margin: 126px 0 0 26px;
      float: left;
    }
    #right {
      margin: 126px 6px 0 0;
      float: right;
    }
    .gallery {
      text-align: center;
      padding: 40px 0 0;
    }
  </style>
</head>
<body>
  <div class="gallery">
    <img src="images/leftarrow.png" id="left" alt="előző" />
    <img src="images/rightarrow.png" id="right" alt="következő" />
    <img src="pictures/picture01.jpg" id="picture"/>
  </div>
  <script type="text/javascript">
    (function () {
      var i = 0,
          pics = [
            "pictures/picture01.jpg",
            "pictures/picture02.jpg",
            "pictures/picture03.jpg"
          ],
          max = pics.length;

      function decrease() {
        if (i <= 0) {
          i = max - 1;
          load();
        } else {
          i--;
          load();
        }
      }

      function increase() {
        if (i >= max - 1) {
          i = 0;
          load();
        } else {
          i++;
          load();
        }
      }

      function load() {
        document.getElementById("picture").src = pics[i];
      }

      document.getElementById('left').onclick = decrease;
      document.getElementById('right').onclick = increase;
    }());
  </script>
</body>
</html>