Maison > Article > interface Web > Explication détaillée de l'exemple de code jquery.slides.js_jquery

Explication détaillée de l'exemple de code jquery.slides.js_jquery

WBOYoriginal: 2016-05-16 15:32:081172parcourir

Slides – est un plugin de diaporama jQuery simple, facile à personnaliser et à styliser.

Slides fournit des effets de fondu ou de transition de diapositive, un fondu d'entrée et de sortie d'image, une précompression d'image, une génération automatique de pagination, une boucle, une personnalisation de la lecture automatique et de nombreuses autres options.

Avec le plug-in Slides, vous pouvez mélanger les diapositives et définir celle avec laquelle vous souhaitez démarrer le diaporama. Il est livré avec de nombreuses instructions et exemples.

Plus de bêtises, laissez-moi juste vous poster le code

 $(function(){
 $("#slides").slidesjs({
  play: {
  active: true,
   // [boolean] Generate the play and stop buttons.
   // You cannot use your own buttons. Sorry.
  effect: "slide",
   // [string] Can be either "slide" or "fade".
  interval: ,
   // [number] Time spent on each slide in milliseconds.
  auto: false,
   // [boolean] Start playing the slideshow on load.
  swap: true,
   // [boolean] show/hide stop and play buttons
  pauseOnHover: false,
   // [boolean] pause a playing slideshow on hover
  restartDelay: 
   // [number] restart delay on inactive slideshow
  }
 });
 });

Réception :

<!doctype html>
 <head>
 <style>
  /* Prevents slides from flashing */
  #slides {
  display:none;
  }
 </style>
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script src="jquery.slides.min.js"></script>
 <script>
  $(function(){
  $("#slides").slidesjs({
   width: ,
   height: 
  });
  });
 </script>
 </head>
 <body>
 <div id="slides">
  <img src="http://placehold.it/x">
  <img src="http://placehold.it/x">
  <img src="http://placehold.it/x">
  <img src="http://placehold.it/x">
  <img src="http://placehold.it/x">
 </div>
 </body>

Le contenu ci-dessus est tout le code sur jquery.slides.js, j'espère qu'il vous plaira.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Le code JavaScript implémente la désactivation des techniques de clic droit, de sélection, de collage, de décalage, de ctrl et d'alt_javascript.Article suivant：Le code JavaScript implémente la désactivation des techniques de clic droit, de sélection, de collage, de décalage, de ctrl et d'alt_javascript.

Articles Liés

Voir plus