Défilement d'image HTML

pegazx Messages postés 18 Date d'inscription   Statut Membre Dernière intervention   -  
pegazx Messages postés 18 Date d'inscription   Statut Membre Dernière intervention   -
bonjour
je suis en train de créer un site et j'aimerai faire défiler mes images comme ca:
http://fredhq.com/projects/roundabout/demos/standard
mais j'ai chercher et je ne trouve pas d'exemples...

pouvez vous me montrer...

Merci
A voir également:

3 réponses

barale61 Messages postés 1214 Date d'inscription   Statut Membre Dernière intervention   110
 
Il faut utiliser jquery https://jquery.com/





http://www.tutoriels-extensions-dreamweaver.fr/
0
pegazx Messages postés 18 Date d'inscription   Statut Membre Dernière intervention  
 
je n'ai pas vraiment trouvé ce que je cherchait mais j'ais trouvé ça et je ne sait pas comment le refaire.
https://wowslider.com/3d-slider-jquery-fresh-cube-demo.html

help me please
0
barale61 Messages postés 1214 Date d'inscription   Statut Membre Dernière intervention   110
 
Ca vas pas être facile de faire mieux:

1/ Tu vas sur https://jquery.com/ et tu télécharges (Download jquery en haut à droite)

2/ Tu télécharges Download the uncompressed, development jQuery 1.11.0 et tu fais un clic droit sur le code source qui s'affiche et Enregistrer sous (tu l'enregistre dans un dossier à côté de tapage)


3/ Tu vas sur http://jquery.malsup.com/cycle/ et tu télécharges Download the Cycle Plugin en haut de page et tu cliques sur Cycle Plugin et clic droit souris enregistrer sous (dans le même dossier que l'autre fichier) et tu te retrouves donc avec 2 fichiers JavaScript dans ton dossier (js par exemple)

4/ Puis en bas de page http://jquery.malsup.com/cycle/ sur Super Basic Demo puis quand la demo s'affiche (c'est juste un exemple de toutes les possibilités) tu fais CTRL+U pour afficher la source et tu copies le code JavaScript:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.io/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>

pour le coller sur ta page avant </head>

Sur ta page tu fais une DIV que tu nommes (par exemple) slider et tu mets test photos dedans exemple:

<DIV ID="slider">
<img src="photo1.jpg">
<img src="photo2.jpg">
<img src="photo3.jpg">
</DIV>
(et ainsi de suite)

Maintenant, tu retournes sur http://jquery.malsup.com/cycle/ et tu cliques sur Effects Browser en haut de page. Là tu as une bibliothèque d'effets et tu en choisis un en cliquant dessus dans la liste (tu vois la démo s'afficher) tu copies le nom au dessus du slider qui va te servir de nom de fonction:

Ce nom, tu le colles dans le script que tu auras copié à la place de fade et tu changes .slideshow par le nom de ta DIV donc #slider.

Dernière chose il te faut maintenant lier les 2 script JavaScript que tu as téléchargé à ta page entre <HEAD> et </HEAD> (<script type="text/javascript" src="jquery.cycle.all.js"></script> et <script type="text/javascript" src="jquery-1.11.0.js"></script>)

Si j'ai rien oublié, tu vas maintenant pouvoir apercevoir ton slider.

http://www.tutoriels-extensions-dreamweaver.fr/
0
barale61 Messages postés 1214 Date d'inscription   Statut Membre Dernière intervention   110
 
Tu devras faire des photos de même taille et de la largeur de ton conteneur principal (ou page)
0
pegazx Messages postés 18 Date d'inscription   Statut Membre Dernière intervention  
 
merci ça marche nikel
0