Probléme avec un slide show

Utilisateur anonyme -
Utilisateur anonyme - 2 janv. 2013 à 19:07

Bonjour,

Je suis étudiant, et pas vraiment à l'aise avec le JS. Je suis actuellement entrain de développer un slider qui offre la possibilité à l'utilisateur d'ajouter des slides. Ces slides sont en réalité des images que j'aimerais lier aux <li> fabriqués quand on appuis sur un bouton.

On m'a conseillé de stocker dans un tableau les images que je vais resservir dans les slides crées. Et impossible de faire le lien entre les <li> crées et les images de stockée.

Pourriez m'indiquer dans un premier temps si mon tableau avec les images est correct ?

var images = new Array(); 
myimg[0] = "img4.jpg"; 
myimg[1] = "img5.jpg"; 
myimg[2] = "img6.jpg";

Dans un second temps auriez vous une idée du morceau de code qui me manque pour créer les liens entre les nouvelles <li> et les images stockée ?

Mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 

<style> 
.slideshow { 
 height:400px; 
 width:1000px; 
 position:relative; 
 overflow:hidden; 
} 

#slider{ 
 border-spacing:0; 
 top:0; 
 left:0; 
 position:absolute; 
  
 -webkit-transition:0.5s; 
} 

.slides td { 
 height:400px; 
 width:1000px; 
 padding:0; 
} 

.slideshow { 
          position: relative; 
          background: #000; 
} 
       
.slideshow .slides li { 
          display: none; 
} 
       
#navigation { 
          position: absolute; 
          bottom: 10px; 
          right: 10px; 
} 
       
#navigation li { 
          display: inline-block; 
          margin: 0 0 0 4px; 
          padding: 6px; 
          background: #FFF; 
          cursor: pointer; 
      } 
</style> 

</head> 

<body> 

<!--Images visibles au lancement du slide--> 

<div class="slideshow"> 
<table id="slider"> 
  <tr id="slides"> 
    <td><img src="img1.jpg"/></td> 
    <td><img src="img2.jpg"/></td> 
    <td><img src="img3.jpg"/></td> 
     
  </tr> 
</table> 

<ul id="navigation"> 
            <li><a href="javascript:goto(0)">1</a></li> 
            <li><a href="javascript:goto(1)">2</a></li> 
            <li><a href="javascript:goto(2)">3</a></li> 
     
        </ul> 
</div><!--nav--> 

<br> 
<h4 class="ajouter"><a href="javascript:addSlide()">Ajouter un projet</a></h4> 

<script> 

var nb = 3;   //nombres d'images 
var current = 0;     //images courrante 
var largeur = 1000;   //largeur du slide 

function goto (num) {   //fonction pour l'image 
var slider = document.getElementById('slider'); 
slider.style.left = (num * largeur * -1)+ "px";   //on effectue une action sur "left" 
current = num; //current évolue avec num puisque c'est le numero de l'image courente. 
} 

/* ajouter un slide au slideshow*/ 
function addSlide(slide) { 
 var c = document.getElementById("slides").insertCell(-1); 
 var i = document.createElement('img'); 
 i.src="img1.jpg"; 
 c.appendChild(i); //rajouter une image 
 nb++; //incrementation 
   
 var nav = document.getElementById("navigation"); 
 var li = document.createElement('li'); //rajouter un li 
 li.innerHTML = '<a href="javascript:images()">' + nb + '</a>'; //Du HTML qui va écrire du HTML 
 nav.appendChild(li); //rajouter le numero 
} 

//Faire un aray qui va stocker les différentes images à ajouter via le bouton.  

var images = new Array(); 
myimg[0] = "img4.jpg"; 
myimg[1] = "img5.jpg"; 
myimg[2] = "img6.jpg"; 


 //document.getElementById("slides").insertCell(-1); 
 //var time = index : 0, delay : 1000, timer : null; 

</script> 

</body> 
</html>

Un grand merci à vous !

Afficher la suite

A voir également:

Probléme avec un slide show
Usb show - Télécharger - Sauvegarde
Show key plus - Télécharger - Utilitaires
Media show pro - Télécharger - Présentation
Slide show movie maker - Télécharger - Visionnage & Diaporama
Smart show 3d - Télécharger - Visionnage & Diaporama

3 réponses

Réponse 1 / 3

Utilisateur anonyme

J'ai réussis à résoudre le problème en faisant tout passer sur le premier tableau, mais impossible d'incrémenter après la première image :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 

<style> 
.slideshow { 
 height:400px; 
 width:1000px; 
 position:relative; 
 overflow:hidden; 
} 

#slider{ 
 border-spacing:0; 
 top:0; 
 left:0; 
 position:absolute; 
  
 -webkit-transition:0.5s; 
} 

.slides td { 
 height:400px; 
 width:1000px; 
 padding:0; 
} 

.slideshow { 
          position: relative; 
          background: #000; 
} 
       
.slideshow .slides li { 
          display: none; 
} 
       
#navigation { 
          position: absolute; 
          bottom: 10px; 
          right: 10px; 
} 
       
#navigation li { 
          display: inline-block; 
          margin: 0 0 0 4px; 
          padding: 6px; 
          background: #FFF; 
          cursor: pointer; 
      } 
</style> 

</head> 

<body> 

<!--Images visibles au lancement du slide--> 

<div class="slideshow"> 
<table id="slider"> 
  <tr id="slides"> 
    <td><img src="img1.jpg"/></td> 
    <td><img src="img2.jpg"/></td> 
    <td><img src="img3.jpg"/></td> 
    <td><img src="img4.jpg"/></td> 
    <td><img src="img5.jpg"/></td> 
     
  </tr> 
</table> 

<ul id="navigation"> 
            <li><a href="javascript:goto(0)">1</a></li> 
            <li><a href="javascript:goto(1)">2</a></li> 
            <li><a href="javascript:goto(2)">3</a></li> 
     
        </ul> 
</div><!--nav--> 

<br> 
<h4 class="ajouter"><a href="javascript:addSlide()">Ajouter un projet</a></h4> 

<script> 

var nb = 3;   //nombres d'images 
var current = 0;     //images courrante 
var largeur = 1000;   //largeur du slide 

function goto (num) {   //fonction pour l'image 
var slider = document.getElementById('slider'); 
slider.style.left = (num * largeur * -1)+ "px";   //on effectue une action sur "left" 
current = num; //current évolue avec num puisque c'est le numero de l'image courente. 
} 

/* ajouter un slide au slideshow*/ 
function addSlide(slide) { 
 var c = document.getElementById("slides").insertCell(-1); 
 var i = document.createElement('img'); 
 i.src="img1.jpg"; 
 c.appendChild(i); //rajouter une image 
 nb++; //incrementation 
   
 var nav = document.getElementById("navigation"); 
 var li = document.createElement('li'); //rajouter un li 
 li.innerHTML = '<a href="javascript:goto(3)">' + nb + '</a>'; //Du HTML qui va écrire du HTML 
 nav.appendChild(li); //rajouter le numero 
} 

//Faire un aray qui va stocker les différentes images à ajouter via le bouton.  

var image = new Array(5);  
for (var i=4; i < 5; i++) { //départ; nombre max; incrementation  
  image[i] = new Image();  
  image[i].src = "img"+i+".jpg";  
}  

 //document.getElementById("slides").insertCell(-1); 
 //var time = index : 0, delay : 1000, timer : null; 

</script> 

</body> 
</html>

Réponse 2 / 3

un_neurone

for (var i=4; i < 5; i++) { //départ; nombre max; incrementation

Pourquoi tu boucles à partir de 4 ?

Réponse 3 / 3

Utilisateur anonyme

J'avais laissé tomber ce tableau ci car j'avais stocké les images dans les <td> ^^ Enfaîte je me sert du goto dans le lien des slides crées pour récupérer des images.

 li.innerHTML = '<a href="javascript:goto(3)">' + nb + '</a>'; //Du HTML qui va écrire du HTML

Seulement j'aimerais créer une boucle parce que avec le (3) il ne met un lien que pour le premier lien de crée. , j'aimerais donc qu'il mette le (4) = <li>5, (5) = <li>6, etc ...

Je commence par le (3) car c'est à partir de là que commence les images cachées.

Autrement j'aimerais bien utiliser le tableau, mais impossible de lier le tableau au générateur. Il faut que je mette quoi à la place du "?".

li.innerHTML = '<a href="javascript: ? ()">' + nb + '</a>';

var image = new Array(5);
for (var j=3; j < 5; j++) {
image[i] = new Image();
image[i].src ="img"+j+".jpg";
}

Discussions similaires

Créer un site de Live show comme Eurolive

afficher l'image du pc portable sur l'ecran avec datashow

Où sont affichés les FPS Minecraft

Votre réponse

Discussions similaires