Sujets similaires

Sujet: Créer un slideshow dans une page html [Résolu] Dim 19 Jan 2014, 10:14

Bonjour !

Je me dirige vers vous car après maintes tentatives je n'ai toujours pas réussi à faire ce que je voulais faire ><
En fait, j'aimerai créer un slideshow dans une fiche pub pour présenter le staff et les postes vacants.

J'ai donc utilisé ce tutoriel : http://www.css-actif.com/t13010-slideshow-horizontal-infini?highlight=Slideshow

Mon souci c'est que je ne sais pas comment intégrer le javascript dans une page html et j'ai eu beau essayer avec des tutoriels sur internet cela ne marche pas :/

Voilà, j'espère que l'un de vous saura me filer un coup de main Créer un slideshow dans une page html [Résolu] 577704309

Créer un slideshow dans une page html [Résolu] 577704309

Merci d'avance I love you

Bonsoir P'tit Lu,

A la fin de ta page HTML, avant la fermeture de la balise body, ouvre des balises script:

Code:: <script> /* le JS ira ici */ </script>
</body>

Ensuite, à l'intérieur des balises tu peux coller ton code Javascript.

Si cela ne fonctionne pas, pourrais tu copier / coller l'ensemble de ton code s'il te plait ?

Bonjour Nihil !

Merci beaucoup de ton aide et de ta réponse rapide Smile

J'ai donc fait ce que tu as demandé mais ça ne marche toujours pas :/

Voici donc mon code :

Code:: <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style type="text/css">

.font78 {
background: white;
}

.font1 {
background-color: #cfcfcf;
width: 480px;
}

  .font2 {
  background-color: #F2F4F9;
width: 450px;
height: 180px;
  border-radius: 40px;
  }

  .text1 {
  padding: 20px;
color: #898989;
font-family: arial;
font-size:10px;
line-height:10px
   }

.titre {
  font-family: 'Rochester', cursive;
  font-size: 36px;
  text-shadow: 0px 0px 2px #ffffff, 1px 1px 2px #000000;
  color: #ffffff;
}

#f1_container {
position: relative;
margin: 10px auto;
width: 80px; /* largeur de l'image ET du block */
height: 80px; /* hauteur de l'image ET du block */ z-index: 1;
}

#f1_container { perspective: 1000; }

#f1_card { width: 100%;
height: 100%;
transform-style:
preserve-3d;
transition: all 1.0s linear; /* temps de la transition en secondes */ }
#f1_container:hover #f1_card { transform: rotateY(180deg); /* direction de la rotation, changer Y par X */
}

.face { position: absolute;
width: 100%; height: 100%;
backface-visibility: hidden; }

.face.back { display: block;
transform: rotateY(180deg); /* direction de la rotation, changer Y par X */
box-sizing: border-box;
padding: 10px; /* pour éviter que le texte soit collé aux bordures, peut être supprimé */
color: white; /* couleur du texte */
text-align: center; /* alignement du texte */
background-color: #aaa; /* couleur de fond */
border-radius: 20px; }

.textadmin {
font-family: 'Rochester', cursive;
  font-size: 30px;
  text-shadow: 0px 0px 2px #ffffff, 1px 1px 2px #000000;
  color: #ffffff; }

.textadmin2 {
font-family: 'Marcellus SC';
font-size:15px;
color: #271a41;}

.textadmin3 {
font-family: arial;
font-size: 10px;
color: #271a41;}

.slideshow,
.slide {
   width: 150px;
   height: 100px;
}

.slideshow {
   margin: 0;
   overflow: hidden;

background-color: black;

border: 4px double black;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
}

.slideshow div {
   position: relative;
   top: 0;
   left: 0;
}

.slide {
   margin: 0;
   overflow: auto;

display: inline-block;
   vertical-align: middle;

text-align: center;
   color: white;
}

.slide p {
   margin: 10px;
   text-align: justify;
}

</style>

</head>

<body>

<link href='http://fonts.googleapis.com/css?family=Marcellus' rel='stylesheet' type='text/css'><link href="http://fonts.googleapis.com/css?family=Rochester" rel="stylesheet" type="text/css" />
<center>
<img style="width: 480px;" src="http://oi43.tinypic.com/295pfgj.jpg" />
<div class="font1">
<div class="titre">
Welcome to Ascensio
</div>
<div class="font2">
<div class="text1">
<div style="text-align: justify;">
Nous sommes désormais en 2014, le monde sorcier se reconstruit. Aux quatre coins de l'Angleterre, on salue la paix retrouvée et les innovations que cette dernière apporte, notamment l'ouverture de la première université de magie, nouvelle annexe de Poudlard accueillant désormais des étudiants venu passer leur DESSA (Diplôme d’Études Supérieures de Sorcellerie Approfondie) ! <br /><br /> Malheureusement, l'arrivée d'élèves plus âgés dans Poudlard n'aura pas que de bonnes conséquences. En effet, caché derrière de « bonnes intentions », les aînés bafoués se plaisent à influencer les plus jeunes, et font gronder les échos d’injustices déjà présentes dans les esprits des Serpentard et des Sangs-Purs. Cachés derrière un anodin club de potion, certains esprits mal intentionnés comptent bien faire avancer leurs idéaux, et remettre en route une guerre que tous pensaient achevée. Prenez garde aux temps qui courent, et savourez les dernières bribes de paix qu’il vous reste tant qu’il en est encore temps !<br />
</div>
</div><br />
</div>

<div class="titre">
Le Staff
</div>
   <div id="slideshow" class="slideshow"><div id="slideshow-container">
   <div class="slide">
   <img src="http://static-mb.minutebuzz.com/wp-content/uploads/2013/04/Emilia-Clarke-sans-maquillage-150x100.jpg" alt="CSSActif"/>
   </div><div class="slide">
   <img src="http://img001.lazygirls.info/people/mary_elizabeth_winstead/mary_elizabeth_winstead_outtakes_3023ODP.thumb.jpg">
   </div><div class="slide">
   <img src="http://www.doctorwho.cz/data/images/news/13-07-31-12-44-48-david-tennant-mluvi-o-vyroci.jpg">
   </div><div class="slide">
   <img src="http://i2.listal.com/image/2605328/150full.jpg">
   </div></div></div>

<br /><br />
</div><img style="width: 480px;" src="http://oi41.tinypic.com/1239wm1.jpg" />
   </center>

   <script> $(function () {
   //VARIABLES MODIFIABLES
   var delaiSwitch = 5000; // Délai (en ms) d'affichage d'un slide
   var delaiTransition = 1000; // Délai (en ms) de l'animation de transition
   var direction = 'left'; // Sens (left ou right) du défilement
   var idSlideshow = '#slideshow'; // ID du slideshow
   var idContainer = '#slideshow-container'; // ID du container

//VARIABLES SYSTEME
   var slideshowWidth = parseInt($(idSlideshow).css('width'));
   var slideshowHeight = parseInt($(idSlideshow).css('height'));
   var nbSlides = $(idContainer+' > .slide').length;

//ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
   $(idContainer).css('width', slideshowWidth*nbSlides+'px');


//REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
   if(direction==='right') {
   var decalageLeft = -slideshowWidth*(nbSlides-1);
   $(idContainer).css('left', decalageLeft+'px');

$(idContainer+' > .slide').each(function() {
   var el = $(this).remove();
   $(idContainer).prepend(el);
   }, this);
   } else {
   $(idContainer+' > .slide').each(function() {
   var el = $(this).remove();
   $(idContainer).append(el);
   }, this);
   }

//ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
   $(idSlideshow+' img').css('max-width', slideshowWidth);
   $(idSlideshow+' img').css('max-height', slideshowHeight);

//LANCEMENT DE L'ANIMATION
   setInterval(function() {
   slideshow()
   }, delaiSwitch);

//FONCTION DE DEFILEMENT
   function slideshow() {
   var compteur = 0; // Compte les slides ayant bougé

if(direction==='right') {
   $(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
   compteur++;

// Lorsque le dernier slide à bougé, on crée la boucle
   if(compteur===nbSlides) {
   var el = $(idContainer+' > .slide:last').remove();
   $(idContainer).prepend(el);
   $(idContainer+' > .slide').css('left', '0');

compteur = 0;
   }
   });
   } else {
   $(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
   compteur++;

// Lorsque le dernier slide à bougé, on crée la boucle
   if(compteur===nbSlides) {
   var el = $(idContainer+' > .slide:first').remove();
   $(idContainer).append(el);

   $(idContainer+' > .slide').css('left', '0');

compteur = 0;
   }
   });
   }
}
});
   </script>

   </body>

Ah, oui, je sais, il faut penser à inclure la libraire jQuery.
Le code du tutoriel utilise jQuery et a besoin de l'avoir pour fonctionner.

Voici le code à rajouter pour que cela fonctionne

Code:: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Tu dois copier ce code juste avant la balise script de ton code js à toi Smile

(il chargera d'abord le jQuery puis ton code à toi)

Ça a marché Very Happy

Merci beaucoup !!

Créer un slideshow dans une page html [Résolu]

Créer un slideshow dans une page html [Résolu]

Sujets similaires

Sujets similaires

Partenaires Or