Un problème avec un slide show

Signaler
-
Bonjour,

Je suis étudiant et actuellement en plein codage d'un slide show où l'utilisateur aurait la possibilité de rajouter des slides. Ça aurait pour but de présenter sur mon site mes derniers projets, et de remonter en arrière si on en a envi.

J'ai réalisé pour cella deux tableaux d'images, un premier avec les images visibles des le lancement du slide, et un autre où serons stockées les images qui seront rajoutées des que on cliqueras sur le bouton "rajouter une slide".

Auriez vous une idée de comment procéder ? Sachant que je dois en plus trouver un moyen pour que le système ne crée pas des slides à l'infini mais qu'il s’arrête au bout d'un moment.

Merci par avance pour votre aide précieuse.

CanineMatte



Mon code est le suivant :

<!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>Document sans nom</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>




,
,




<li>[javascript:goto(0) 1]</li>
<li>[javascript:goto(1) 2]</li>
<li>[javascript:goto(2) 3]</li>



<!--nav-->



[javascript:addSlide() Ajouter une slide]


<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 = '[javascript:myimg() ' + nb + ']'; //Du HTML qui va écrire du HTML
nav.appendChild(li); //rajouter le numero
}

//Faire un aray qui va stocker les différentes images possibles.

var myimg = 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>


</html>