Derulare grup de imagini cu JavaScript

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
patricia
Mesaje: 82

Derulare grup de imagini cu JavaScript

Pe site este pus un mic exemplu in care avem o imagine ,iar in stanga si dreapta ei ,doua legaturi(urm si prec),
la apasarea legaturilor se executa 2 functii next si urm,schimbandu-se imaginea actuala,cu o imagine preluata dintr-un vector
de imagini cu ajutorul functiilor.
Cum rezolvam modificam functiile daca dorim ca in loc de o imagine sa avem 2,3,......n(imagini), care sa apara in pagina, iar cele doua functii trebuie sa scimbe valoarea "src" pt. cele n imagini, nu doar pt.una;
Am incercat o varianta dar e incorecta,in anumite situatii imi afiseaza doua imagini identice (una langa alta;)

Cod: Selectaţi tot

<html>
<head>
<title>DERULARE
</title>
<script type="text/javascript">
var total=new Array("imagine1.jpg","imagine2.jpg","imagine3.jpg","imagine4.jpg","imagine5.jpg");
var nr=1;
function next(){
if(nr<(total.length-1)){document.images[1].src=document.images[0].src; 
                     nr++; 
					 document.images[0].src=total[nr]; }
		  }
function back(){
if(nr>1){document.images[0].src=document.images[1].src;  
                nr=nr-2;
				document.images[1].src=total[nr];}
else if(nr==0){document.images[0].src=document.images[1].src;    
                nr++;
                  document.images[1].src=total[nr];}				
					 }
</script>
</head>
<body>
<a href="#" onclick="back();"><<</a>
<img src="imagine1.jpg" width="100" height="100">
<img src="imagine2.jpg" width="100" height="100">
<a href="#" onclick="next();">>></a>
</body>
</html>
MarPlo Mesaje: 4343
Salut
Ca sa derulezi Inainte, Inapoi grupuri de imagini, se poate cu un array multidimensional, adica un array cu alte array (grupe) cu adrese de imagini, care sa fie parcurs la apasarea butonului si sa afiseze imaginile din grupa accesata.
Uiite un astfel de script.

Cod: Selectaţi tot

<html>
<head>
<title>Display group of images</title>
<script type="text/javascript">
// Display group of images with Next, Back buttons - www.coursesweb.net/javascript/

// HERE add the groups of images
// Each group into a [], with their SRC addres between quotes, separated by comma
var gimgs = [
  ['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg'],
  ['image1.jpg', 'image2.jpg', 'image3.jpg'],
  ['foto1.jpg', 'foto2.jpg', 'foto3.jpg', 'foto4.jpg']
];

// Object for the group of images
var setImgs = new Object();
 setImgs.ig = 0;            // store the index for Next /Back group

 // traverse the accessed group in gimgs (with "ig" index), and display the images in #setimgs
 setImgs.getImgs = function() {
   var nrim = gimgs[this.ig].length;
   var re = '';
   for(var i=0; i<nrim; i++) {
     re += ' <img src="'+ gimgs[this.ig][i]+ '" height="100" />';
   }
   document.getElementById('setimgs').innerHTML = re;
 }

 // set the "ig" to access Next group
 setImgs.next = function(){
   if(this.ig < (gimgs.length - 1)) this.ig++;
   else this.ig = 0;
   this.getImgs();
 }

 // set the "ig" to access Previous group
 setImgs.back = function(){
   if(this.ig > 0) this.ig--;
   else this.ig = gimgs.length - 1;
   this.getImgs();
 }
</script>
</head>
<body>
<div id="setimgs">
 <img src="imagine1.jpg" width="100" height="100">
 <img src="imagine2.jpg" width="100" height="100">
</div>
<button onclick="setImgs.back();"><<</button> &nbsp; 
<button onclick="setImgs.next();">>></button>
</body>
</html>

Subiecte similare