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:
  1. <script language="javascript">  
  2.     i = 1;  
  3.     max = 3;  
  4.     function decrease()  
  5.     {  
  6.         if(i<=1)  
  7.         {  
  8.             i = max;  
  9.             load();  
  10.         }  
  11.         else  
  12.         {  
  13.             i--;  
  14.             load();  
  15.         }  
  16.     }  
  17.     function increase()  
  18.     {  
  19.         if(i>=max)  
  20.         {  
  21.             i = 1;  
  22.             load();  
  23.         }  
  24.         else  
  25.         {  
  26.             i++;  
  27.             load();  
  28.         }  
  29.     }  
  30.     function load()  
  31.     {  
  32.         alert(i);  
  33.     }  
  34. </script>  
A BODY pedig így néz ki:
  1. <img src="images/leftarrow.png" align="left" style="padding-top: 162px; padding-left: 26px;"       
  2. nClick="decrease()"/>  
  3. <img src="images/rightarrow.png" align="right" style="padding-top: 162px; padding-right:   
  4. 6px;" onClick="increase()"/>  
  5. <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"
  1. <img src="pictures/picture01.jpg" style="padding-top: 40px;" id="galeriakep"/>  
  1. var galeria_img = document.getElmentById('galeriakep');  
  2. 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:
  1. <script language="javascript">  
  2.     i = 1;  
  3.     max = 3;  
  4.     pic1 = "pictures/picture01.jpg";  
  5.     pic2 = "pictures/picture02.jpg";  
  6.     pic3 = "pictures/picture03.jpg";  
  7.     function decrease()  
  8.     {  
  9.         if(i<=1)  
  10.         {  
  11.             i = max;  
  12.             load();  
  13.         }  
  14.         else  
  15.         {  
  16.             i--;  
  17.             load();  
  18.         }  
  19.     }  
  20.     function increase()  
  21.     {  
  22.         if(i>=max)  
  23.         {  
  24.             i = 1;  
  25.             load();  
  26.         }  
  27.         else  
  28.         {  
  29.             i++;  
  30.             load();  
  31.         }  
  32.     }  
  33.   
  34.     function load()  
  35.     {  
  36.         src = "pic"+i;  
  37.         var galeria_img = document.getElmentById('galeriakep');    
  38.             galeria_img.src = src;  
  39.     }  
  40. </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:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>Page Title</title>  
  5.   <style type="text/css">  
  6.     #left {  
  7.       margin: 126px 0 0 26px;  
  8.       float: left;  
  9.     }  
  10.     #right {  
  11.       margin: 126px 6px 0 0;  
  12.       float: right;  
  13.     }  
  14.     .gallery {  
  15.       text-align: center;  
  16.       padding: 40px 0 0;  
  17.     }  
  18.   </style>  
  19. </head>  
  20. <body>  
  21.   <div class="gallery">  
  22.     <img src="images/leftarrow.png" id="left" alt="előző" />  
  23.     <img src="images/rightarrow.png" id="right" alt="következő" />  
  24.     <img src="pictures/picture01.jpg" id="picture"/>  
  25.   </div>  
  26.   <script type="text/javascript">  
  27.     (function () {  
  28.       var i = 0,  
  29.           pics = [  
  30.             "pictures/picture01.jpg",  
  31.             "pictures/picture02.jpg",  
  32.             "pictures/picture03.jpg"  
  33.           ],  
  34.           max = pics.length;  
  35.   
  36.       function decrease() {  
  37.         if (i <= 0) {  
  38.           i = max - 1;  
  39.           load();  
  40.         } else {  
  41.           i--;  
  42.           load();  
  43.         }  
  44.       }  
  45.   
  46.       function increase() {  
  47.         if (i >= max - 1) {  
  48.           i = 0;  
  49.           load();  
  50.         } else {  
  51.           i++;  
  52.           load();  
  53.         }  
  54.       }  
  55.   
  56.       function load() {  
  57.         document.getElementById("picture").src = pics[i];  
  58.       }  
  59.   
  60.       document.getElementById('left').onclick = decrease;  
  61.       document.getElementById('right').onclick = increase;  
  62.     }());  
  63.   </script>  
  64. </body>  
  65. </html>