Dans ce tuto vidéo, vous découvrirez comment créer une bannière animée comme dans iTunes, très facilement avec jQuery (framework javascript gratuit) pour votre site internet.
Les points abordées pour notre tuto Bannière Animée :
- Création de la couche HTML, CSS, et Javascript
- jQuery : Manipulation DOM
- jQuery : Utilisation des CSS, des animations et des boucles
- jQuery : Utilisation des évènements
- Amélioration et finalisation de l'interface avec CSS3
Une archive zip est fournie contenant l'intégralité du projet, ce qui vous permettra de rapidement prendre en main le script et de suivre facielement cette vidéo!. A la fin de cette formation Jquery, vous serez en mesure de mettre en place sur votre propre site cette bannièr animée ou caroussel !
Jetez un oeil à ces autres tuto jQuery
Menu déroulant en jQuery
Dans ce tuto en vidéo, vous verrez comment réaliser un menu…
Réalisation d'un slideshow…
Dans ce tuto jQuery gratuit, nous allons apprendre à réaliser…
Plugin Jquery placeholder
Dans ce tuto Jquery en vidéo, vous verrez comment utiliser…
Plugin Jquery jRumble
Dans ce tuto Jquery en vidéo, nous verrons comment utiliser…
Formulaire de contact AJAX…
Dans ce tuto AJAX en vidéo, nous réaliserons un formulaire…
Styliser un formulaire avec…
Dans ce tuto CSS et Jquery, nous verrons comment styliser…
Système de commentaires avancé…
Dans ce tuto PHP en vidéo, nous verrons comment réaliser…
Système de vote façon YouTube…
Dans ce tuto AJAX en vidéo, vous apprendrez à réaliser un…
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto jQuery de 33 minutes est proposée dans une résolution plus grande que l’extrait suivant :
mr32
, Formateur
Développeur dans une agence de communication bien connue sur le web, et entouré de graphistes avec une imagination démesurée... j'essaye de concilier au mieux technique et graphisme dans les développements web et iPhone...
En savoir plus sur mr32
Témoignage des clients de mr32
![]()
Toujours de très bon tutos !
![]()
Un excellent pédagogue, de très bons thèmes de tutos : formateur à suivre !
![]()
Super Tuto ! Très bien expliqué, les exemples aussi sont très bien !
D'autres tuto de mr32
Initiez vous aux différents types de données en PHP
Dans ce tuto PHP, vous découvrirez comment utiliser les différents types de donnéess…
Initiez vous à toutes les positions CSS
Dans ce tuto CSS, vous découvrirez comment utiliser les positions CSS dans vos pages…
Générer du texte en 3D avec CSS
Dans ce tuto CSS, vous découvrirez comment générer du texte en 3D avec CSS dans vos…
Protéger vos emails contre le spam sur votre site internet
Ce tuto Javascript vous présentera une méthode pour protéger une adresse e-mail qui…
Notes attribuées par les utilisateurs (18 votes)
Les avis / Questions des utilisateurs (19)
Donnez votre avis ou posez une question au formateur.
Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous
Ce tuto en résumé ...
Ce tuto jQuery d’une durée de 33 minutes a été acheté 483 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 3 mai 2011 par mr32, contributeur, ayant reçu une note moyenne de 4,6/5 pour l’ensemble de ses vidéos, dans les catégories Tuto jQuery webdesign et Animation.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.
Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.











(a acheté ce tuto - 08 mars 2012)
" Excellent tuto !
Merci "
(a acheté ce tuto - 11 janvier 2012)
" Ce tuto est vraiment super bien fait et clair.
Merci beaucoup au formateur.
"
(a acheté ce tuto - 06 décembre 2011)
" 5/5 "
(auteur de ce tuto - 20 septembre 2011)
" Bonjour, je vous invite à consulter le site jQuery et à comparer les différences entre ces deux versions. De là, vous pourrez réadapter le script.
http://docs.jquery.com/Release:jQuery_1.2 "
(a acheté ce tuto - 19 septembre 2011)
" la version coté serveur de jquery preinstallée est la 1.2.6.
le code javascript.js est il compatible avec cette version ?
mercibien "
(a acheté ce tuto - 19 septembre 2011)
" comme je le disais dans le post précédent, je n'arrive pas a installer le carousel sur ma boutique...
une librairie jquery est déja préinstallé coté serveur ...
peut il y avoir conflit?
"
(a acheté ce tuto - 18 septembre 2011)
" bonjour,
jai acheté votre tuto ..nickel bien réalisé et explications claires ...
par contre j ai du mal a l integrer dans le template de ma boutique e commerce ....
Je n'arrive pas a savoir comment faire pour appler les fichiers .js et ou placer les lignes dans le header
<script type="text/javascript" src="../js/jquery-1.5.2.js"></script>
<script type="text/javascript" src="../js/javascript.js"></script>
merci "
(a acheté ce tuto - 18 septembre 2011)
" bonjour,
je n'arrive pas a integrer la banniere dans une boutique e commerce ...
pas de souci pour css et html mais je n arrive pas a appeler le js ... "
(auteur de ce tuto - 16 septembre 2011)
" Etrange... les fichiers sources sont pourtant bien présents dans ma fiche, et d'autres utilisateurs s'en servent sans aucun problème. "
(a acheté ce tuto - 15 septembre 2011)
" Bien mais pas de fichier sources.... "
(a acheté ce tuto - 22 juillet 2011)
" J'ai mis mes images sur votre package ça marche. Donc je vais décortiquer tout ça demain.
Merci pour votre aide et votre rapidité de réponse ! "
(auteur de ce tuto - 22 juillet 2011)
" Il y a forcément quelque chose sinon ça marcherait... Les urls sont-elles bonnes ? Firebug indique-t-il une erreur ? ( le package joint fonctionne, ceci peut aider à trouver le soucis ) "
(a acheté ce tuto - 22 juillet 2011)
" Bonjour, je viens de commencer à coder. Je suis coincé au niveau de l'affichage de la grande image, donc partie CCS, juste avant le placement du bouton.
Les miniatures sont posées correctement, mais quand je tape le code pour les grands formats, je me retrouve avec une slide complètement blanche, je ne sais pas où passe les miniatures du code précédent.
Le bouton quand à lui descend bien en bas du slide, j'ai regardé mon code plusieurs fois, il est bon. "
(a acheté ce tuto - 11 juillet 2011)
" Super tuto, merci mr32 ! :)
Bonnes explications, code très propre et bonne dynamique de voix.
Merci ! "
(a acheté ce tuto - 16 juin 2011)
" j'ai pu aprécier le fait de réaliser à l'aide de ce tutoriel ma bannière jquery. Je regrette en revanche qu'il n'y ait pas plus d'approfondissmeent dans les expliactions du code. Je me suis finalement retrouvé à recopier comme un mouton les codes présentés. Dommage car cette vidéo est intéressante. "
(a acheté ce tuto - 07 mai 2011)
" C'est bien "
(auteur de ce tuto - 05 mai 2011)
" Pour modifier les liens, il suffit de modifier les balises <a href="#blabla">....</a>
Et notamment de remplacer "#blabla" par "http://www.ton-lien.fr" "
(a acheté ce tuto - 05 mai 2011)
" impecc merci beaucoup.... je n'ai pas vu au mettre les liens par contre... si la personne décide de cliquer sur une des images :-) - voilà merci j'ai appris de nouvelles choses :-) bonne continuation et j'espère qu'il y en aura d'autres :-) "
(a acheté ce tuto - 05 mai 2011)
" Très bien expliqué, avec une voix sympa qui n'endort pas. merci "