Exemple d'utilisation du plug-in jquery bxslider Analysis_jquery

L'exemple de cet article décrit l'utilisation du plug-in jquery bxslider. Partagez-le avec tout le monde pour votre référence. L'utilisation spécifique est la suivante :

Appelez d'abord le fichier js correspondant :

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>

Partie du code jQuery :

$(function(){ 
 $('#marquee').bxSlider({ 
  mode:'vertical', //默认的是水平 
  displaySlideQty:1,//显示li的个数 
  moveSlideQty: 1,//移动li的个数  
  captions: true,//自动控制 
  auto: true, 
  controls: false//隐藏左右按钮 
 }); 
});

La structure HTML est la suivante :

<div style="width:450px; height:296px; float:left; 
overflow:hidden; margin-left:200px;">
 <ul id="marquee">
  <li>
  <img src="img/1.jpg" alt="banner_美容" 
  style="width:450px; height:296px;">
  </li>
  <li>
  <img src="img/2.jpg" alt="banner_美容"
  style="width:450px; height:296px;">
  </li>
 </ul>
</div>

CSS définit les styles des boutons gauche et droit :

.bx-prev{ 
width:12px; height:26px; 
background:#f00;text-indent: -999999px;z-index: 999; 
position: absolute; float:left; left:455px; top:110px;
}
.bx-next{ 
width:12px; height:26px; 
background:#f00; text-indent: -999999px;
z-index: 999; 
position: absolute; top:110px;left:-15px;
}

Description du paramètre :

Paramètres de configuration détaillés de bxSlider :
bxSlider possède de nombreux paramètres de configuration, vous permettant d'utiliser des paramètres pour créer une variété d'effets de curseur :

mode : 'horizontal', // 'horizontal', 'vertical', 'fade' définit le sens de défilement du curseur. Vous avez le choix entre trois valeurs
. infiniteLoop : true, // true, false - affiche la première diapositive après la dernière boucle infinie
hideControlOnEnd: false, // true, false - si vrai, masquera le contrôle « suivant » sur la dernière diapositive et le contrôle « précédent » sur la première Si défini sur vrai, masquera « suivant » sur la dernière diapositive et sur la diapositive avant Film donc "précédent"
contrôles : vrai, // vrai, faux - contrôle précédent et suivant s'il faut afficher les boutons "précédent" et "suivant"
vitesse : 500, // entier - en ms, la durée des transitions temporelles occupera la vitesse, l'unité est la milliseconde
easing : 'swing', // utilisé avec jquery.easing.1.3.js - voir http://gsgd.co.uk/sandbox/jquery/easing/ pour les options disponibles
pager : true, // true / false - afficher un pager
pagerSelector : null, // sélecteur jQuery - élément pour contenir le pager ex : '#pager'
pagerType : 'full', // 'full', 'short' - si le pager 'full' affiche 1,2,3... si le pager 'short' affiche 1/4 Si full est défini, 1, 2, 3 le seront être affiché..., si court est défini, 1/4 sera affiché
. pagerLocation : 'bottom', // 'bottom', 'top' - emplacement du pager L'emplacement du numéro de page
pagerShortSeparator : '/', // chaîne - ex : le pager 'of' afficherait 1 séparateur de page sur 4
pagerActiveClass : 'pager-active', // chaîne - nom de classe attaché au lien de pager actif nom de classe du numéro de page actuel
nextText : 'next', // string - texte affiché pour le contrôle 'next' Le texte de la page suivante
nextImage : '', // chaîne - chemin de fichier de l'image utilisé pour le contrôle 'suivant' ex : 'images/next.jpg' Vous pouvez définir la page suivante sur une image
nextSelector : null, // sélecteur jQuery - élément devant contenir le contrôle suivant ex : '#next'
. prevText : 'prev', // string - texte affiché pour le contrôle 'précédent' Le texte de la page précédente
prevImage : '', // chaîne - chemin du fichier de l'image utilisé pour le contrôle 'précédent' ex : 'images/prev.jpg' Image de la page précédente
. prevSelector : null, // sélecteur jQuery - élément devant contenir le contrôle précédent ex : '#next'
. captions: false, // true, false - afficher les légendes de l'image (lit la balise 'title' de l'image) S'il faut afficher le titre de l'image et lire le contenu de l'attribut title de l'image.

captionsSelector : null, // sélecteur jQuery - élément pour contenir les légendes ex : '#captions'
. auto: false, // true, false - faire changer automatiquement le diaporama Le diaporama défile automatiquement
autoDirection : 'next', // 'next', 'prev' - direction dans laquelle l'affichage automatique parcourra l'ordre de défilement automatique
autoControls : false, // true, false - afficher les commandes « start » et « stop » pour afficher automatiquement les touches de contrôle de défilement automatique
autoControlsSelector : null, // sélecteur jQuery - élément pour contenir les contrôles automatiques ex : '#auto-controls'
autoStart : true, // true, false - si false, show attendra que le contrôle "start" soit activé
autoHover : false, // true, false - si true, l'affichage s'arrêtera au survol de la souris. Le réglage du survol entraînera la mise en pause du défilement automatique
autoDelay : 0, // entier - en ms, le temps avant le démarrage du salon de l'auto
pause : 3000, // entier - en ms, la durée entre chaque transition de diapositive
startText : 'start', // chaîne - texte affiché pour le texte du bouton de démarrage du contrôle 'start'
startImage : '', // string - chemin du fichier de l'image utilisé pour le contrôle 'start' ex : 'images/start.jpg' Image du bouton démarrer
. stopText : 'stop', // string - texte affiché pour le contrôle 'stop' Le texte du bouton stop
stopImage : '', // chaîne - chemin de fichier de l'image utilisé pour le contrôle 'stop' ex : 'images/stop.jpg' Image du bouton d'arrêt
. ticker : false, // true, false - mode ticker à mouvement continu (pensez au ticker d'actualités)
// remarque : autoControls et autoControlsSelector s'appliquent au ticker
tickerSpeed : 5000, // entier - a un effet inverse sur la vitesse, donc une valeur de 10 000
. // défile très lentement alors qu'une valeur de 50 défilera très rapidement
. tickerDirection : 'next', // 'next', 'prev' - direction dans laquelle le téléscripteur parcourra
tickerHover : false, // true, false - si vrai, le ticker s'arrêtera au survol de la souris
wrapperClass : 'bx-wrapper', // string - nom de classe attaché au wrapper du curseur
StartingSlide : 0, // entier - le spectacle commencera sur la diapositive spécifiée. Remarque : les diapositives sont basées sur zéro
. displaySlideQty : 1, // entier - nombre de diapositives à afficher en même temps
moveSlideQty : 1, // entier - nombre de diapositives à déplacer en même temps
randomStart : false, // true, false - si vrai, le spectacle démarrera sur une diapositive aléatoire

J'espère que cet article sera utile à la programmation jQuery de chacun.