Partage
  • Partager sur Facebook
  • Partager sur Twitter

Effet "slide" image avec bouton suivant et précédent

13 août 2010 à 5:23:34

Bonjour,
j'ai un site web et je voulais y ajouter quelques effets en javascript.
comme ici, quand on demande quelque chose sans avoir 10000 preuves qu'on à lu les 100 tutoriels il y a toujours un perdu qui répond "j'ai jamais aidé mais je crois que je peux te réponse lis ce tutoriels , celui la aussi et lui..." donc au final, pour une simple question tout devient...

mais je ne veux pas un script tout fais loin de la ...
j'ai déjà lu le tutoriel javascript du siteduzero.Mais je ne sais toujours pas comment je peux créer le script que je veux donc j'aimerais seulement qu'une personne m'indique par oû commencer où un site qui montre une exemple qui n'est pas trop complexe.
Mon but est de mettre quelques images (5) une à coté de l'autre et à chaque extrémité un bouton suivant et précédent et si je click sur le bouton suivant une image prend la place de la cinquième image et la première disparait j'aimerais avec du style "slide" mais je vais commencer sans.
donc j'ai créé un tableau avec mes 5 images et une boucle qui incrémente de 1 si ma variable i est plus petit que la longueur de mon tableau ... mais après je ne sais quoi écrire breff j'ai aucune idée pour le reste. Et je vais le dire une 100 fois je veux pas le code tout fait... je ne veux pas avoir quelqu'un qui me dit on donne pas de code tout fais vas tout lire les 2 millions de page
j'ai déjà lis un tutoriels , j'ai des petites bases et je veux simplement faire ceci pour mon site.


Désolé pour le français j'ai fais du mieux que je peux, j'essaie toujours de m'améliorer et de ne pas prendre les expressions d'ici parce que j'ai pu constater que vous comprenez absolument rien.Et si vous ne comprenez pas quelque chose, vous pouvez m'indiquer ce que vous ne comprenez pas
  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
13 août 2010 à 8:47:13

Pour les expressions ça dépend où c'est ici :D

Pour le script :

Étape 1


Tu fais ta structure en html. Les 4 images affiché, des boutons suivant et précédent qui ont une classe sépcifique pour suivant/précédent.

Étape 2


Tu t'occupes du CSS pour que ça ait la gueule que tu veux. En faisant attention à ça :
.
       +--------------------+
  +----|--------------------|------------------+
← |    |                    |                  | →
← |    |                    |                  | →
  +----|--------------------|------------------+
       +--------------------+           ^Images
           ^Zone D'affichage

Le long carré c'est la zone qui contient toutes tes images, pour avancer ou reculer tu va faire glisser ça pour que les images s'affichent dans le petit carré qui lui possède un overflow:hidden

Étape 3


Crée la fonction JS qui permet d'avancer et de reculer dans la liste de tes images en modifiant le CSS, par exemple
/**
 * Fait défiler les images
 *
 * @param {int} avance +1 pour avancer, -1 pour reculer
 */
function parcourir(avance) {
}


Étape 4


ajoutes les évènements aux boutons suivant / précédent

fin :p
  • Partager sur Facebook
  • Partager sur Twitter
13 août 2010 à 12:10:34

Rhalala, ce nod_, toujours aussi bon.

Merci pour cette super explication, je me demandais également comment faire ça de manière opti. Même plus besoin de chercher ^^
  • Partager sur Facebook
  • Partager sur Twitter
Directeur technique, créateur de jeux HTML5 et fan de JavaScript | La suite de OnHack est sur les rails !
13 août 2010 à 19:38:42

héhé, bon déjà c'est beaucoup plus clair et je sais où commencer.
merci et nice le petit schéma .
  • Partager sur Facebook
  • Partager sur Twitter
20 août 2010 à 8:21:29

bonjour,
j'essais toujours mais toujours rien ...
mais je ne comprends pas le overflow c'est quoi au juste ?
j'ai fais quelque chose comme sa ...
<ul>
   <li><img src="images/un.png" class="grosseur"  alt=""/></li>
   <li><img src="images/deux.png" class="grosseur" alt=""/></li>
   <li><img src="images/trois.png" class="grosseur" alt=""/></li>
   <li><img src="images/quatre.png" class="grosseur" alt=""/></li>
   <li><img src="images/cinq.png" class="grosseur" alt=""/></li>
   <li><img src="images/un.png" class="cacher" alt=""/></li>
</ul>


ul
{
	margin-left:15%;
	margin-top:25%;
list-style-type : none; 
} 
.grosseur
{
	float:left;
	width:15%;
	height:15%;
}
.cacher
{
	display:none;
	float:left;
	width:15%;
	height:15%;
}


est-ce que c'est bon ? et sinon pourquoi overflow

et pour ma fonction javascript c'est du grand nimportequoi...
  • Partager sur Facebook
  • Partager sur Twitter
20 août 2010 à 8:50:41

C'est sûr qu'on va pouvoir t'aider si tu nous donnes tout sauf le javascript ;)
  • Partager sur Facebook
  • Partager sur Twitter
Directeur technique, créateur de jeux HTML5 et fan de JavaScript | La suite de OnHack est sur les rails !
20 août 2010 à 22:06:47

c'est presque mieux de ne pas le donner ...
et j'aimerais savoir c'est quoi la différence entre display:none et overflow:hidden ?

pour l'instant sa donne un peu sa...

5 images en horizontal et un bouton à chaque extrémité et une sixième image caché avec display:none

est-ce que pour l'instant mon html et css est bon ?
je vais essayer de faire une fonction qui à un peu de sens et je vais le mettre ici.

quelqu'un connais un lien avec une xemple que je pourais regarder parce que j'ai plus aucune idée comment faire sa fais 2 semaines il me manque seulement sa pour finir mon site...
  • Partager sur Facebook
  • Partager sur Twitter
21 août 2010 à 4:32:14

Ha ben écoute, si tu estimes qu'il est mieux de ne pas donner ton javascript dans une demande d'aide sur le forum javascript, c'est toi qui voit hein....
  • Partager sur Facebook
  • Partager sur Twitter
Directeur technique, créateur de jeux HTML5 et fan de JavaScript | La suite de OnHack est sur les rails !
21 août 2010 à 22:20:47

tu pourrais quand même répondre à ma question non ?
et ma question n'étais pas sur le javascript.
et pour l'exemple si tu en connais une tu pourrais me le donner?
parce que mon code javascript et pas mieu qu'il y a 2 semaines donc sa va changer quoi de l'écrire à nouveau?
  • Partager sur Facebook
  • Partager sur Twitter
22 août 2010 à 8:04:00

Si ta question ne concerne pas JavaScript, je te conseille de créer un sujet dans le forum correspondant à ton problème.
  • Partager sur Facebook
  • Partager sur Twitter
Directeur technique, créateur de jeux HTML5 et fan de JavaScript | La suite de OnHack est sur les rails !
22 août 2010 à 10:08:52

tu le fais exprès où...?
ma première question étais sur le javascript mais si tu aurais bien lu mon dernier message je demande la différence entre display:none et overflow:hidden
  • Partager sur Facebook
  • Partager sur Twitter
22 août 2010 à 10:17:28

Je crois que c'est toi qui ne comprends pas.
Tu as créé ce sujet pour un problème JavaScript. nod_ t'a apporté une réponse.
Une semaine plus tard, tu reviens sur le même sujet, mais pour des problèmes CSS. Tu poses des questions qui trouvent leur réponse en 30 secondes sur google.

Donc oui, je le fais exprès, car tes nouvelles questions n'ont rien à faire ici. Du coup, je ferme le sujet pour manque de recherche et pour mauvais forum.

Bonne journée
  • Partager sur Facebook
  • Partager sur Twitter
Directeur technique, créateur de jeux HTML5 et fan de JavaScript | La suite de OnHack est sur les rails !