Défilement d'image HTML
Fermé
pegazx
Messages postés
18
Date d'inscription
vendredi 31 janvier 2014
Statut
Membre
Dernière intervention
15 novembre 2015
-
13 févr. 2014 à 21:33
pegazx Messages postés 18 Date d'inscription vendredi 31 janvier 2014 Statut Membre Dernière intervention 15 novembre 2015 - 15 févr. 2014 à 18:57
pegazx Messages postés 18 Date d'inscription vendredi 31 janvier 2014 Statut Membre Dernière intervention 15 novembre 2015 - 15 févr. 2014 à 18:57
A voir également:
- Défilement d'image HTML
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
- Image cliquable html ✓ - Forum Internet / Réseaux sociaux
- Recherche par image - Guide
- Image iso - Guide
- Positionner une image html ✓ - Forum HTML
3 réponses
barale61
Messages postés
1205
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
10 mars 2023
109
13 févr. 2014 à 21:40
13 févr. 2014 à 21:40
Il faut utiliser jquery https://jquery.com/
http://www.tutoriels-extensions-dreamweaver.fr/
http://www.tutoriels-extensions-dreamweaver.fr/
barale61
Messages postés
1205
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
10 mars 2023
109
Modifié par barale61 le 15/02/2014 à 17:54
Modifié par barale61 le 15/02/2014 à 17:54
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:
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/
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/
barale61
Messages postés
1205
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
10 mars 2023
109
15 févr. 2014 à 17:17
15 févr. 2014 à 17:17
Tu devras faire des photos de même taille et de la largeur de ton conteneur principal (ou page)
pegazx
Messages postés
18
Date d'inscription
vendredi 31 janvier 2014
Statut
Membre
Dernière intervention
15 novembre 2015
15 févr. 2014 à 18:57
15 févr. 2014 à 18:57
merci ça marche nikel
15 févr. 2014 à 09:05
https://wowslider.com/3d-slider-jquery-fresh-cube-demo.html
help me please