Beispiel für die Verwendung des JQuery-Plug-Ins BXSlider Analysis_JQuery

Das Beispiel in diesem Artikel beschreibt die Verwendung des JQuery-Plug-Ins bxslider. Teilen Sie es als Referenz mit allen. Die spezifische Verwendung ist wie folgt:

Rufen Sie zunächst die entsprechende js-Datei auf:

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

jQuery-Codeteil:

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

HTML-Struktur ist wie folgt:

<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 definiert die Stile der linken und rechten Schaltfläche:

.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;
}

Parameterbeschreibung:

bxSlider detaillierte Konfigurationsparameter:
bxSlider verfügt über viele Konfigurationsparameter, sodass Sie Parameter verwenden können, um eine Vielzahl von Slider-Effekten zu erstellen:

Modus: 'horizontal', // 'horizontal', 'vertikal', 'fade' definiert die Richtung des Schiebereglers. Es stehen drei Werte zur Auswahl
infiniteLoop: true, // true, false – erste Folie nach der letzten Endlosschleife anzeigen
hideControlOnEnd: false, // true, false – wenn true, wird das Steuerelement „next“ auf der letzten Folie und das Steuerelement „prev“ auf der ersten Folie ausgeblendet. Wenn auf „true“ gesetzt, wird „next“ auf der letzten Folie und auf der ersten Folie ausgeblendet. Film daher „vorher“
Steuerelemente: true, // true, false – previous und next steuert, ob die Schaltflächen „Zurück“ und „Weiter“ angezeigt werden
Geschwindigkeit: 500, // Ganzzahl – in ms, Dauer der Zeit, die Folienübergänge beanspruchen. Geschwindigkeit, Einheit ist Millisekunden
easing: 'swing', // wird mit jquery.easing.1.3.js verwendet – siehe http://gsgd.co.uk/sandbox/jquery/easing/ für verfügbare Optionen
pager: true, // true / false – einen Pager anzeigen
pagerSelector: null, // jQuery-Selektor – Element, das den Pager enthalten soll, z. B.: '#pager'
pagerType: 'full', // 'full', 'short' - wenn der Pager „full“ 1,2,3 anzeigt... wenn der Pager „short“ 1/4 anzeigt. Wenn full eingestellt ist, werden 1, 2, 3 angezeigt angezeigt werden ..., wenn kurz eingestellt ist, wird 1/4 angezeigt pagerLocation: 'bottom', // 'bottom', 'top' - Standort des Pagers Der Standort der Seitenzahl
pagerShortSeparator: '/', // String – Beispiel: 'of' Pager würde 1 von 4 Seitentrennzeichen
anzeigen pagerActiveClass: 'pager-active', // string – Klassenname, der an den aktiven Pager-Link angehängt ist, className der aktuellen Seitennummer
nextText: 'next', // string – angezeigter Text für das 'next'-Steuerelement Der Text der nächsten Seite
nextImage: '', // string – Dateipfad des Bildes, das für die „next“-Steuerung verwendet wird, z. B.: „images/next.jpg“ Sie können die nächste Seite auf ein Bild
festlegen nextSelector: null, // jQuery-Selektor – Element, das das nächste Steuerelement enthalten soll, z. B. „#next“
prevText: 'prev', // string – angezeigter Text für das Steuerelement „ previous“ Der Text der vorherigen Seite
prevImage: '', // string – Dateipfad des Bildes, das für die „vorherige“ Steuerung verwendet wird, z. B.: „images/prev.jpg“ Bild auf der vorherigen Seite
prevSelector: null, // jQuery-Selektor – Element, das das vorherige Steuerelement enthalten soll, z. B.: '#next'
captions: false, // true, false – Bildunterschriften anzeigen (liest das Bildtitel-Tag) Ob der Titel des Bildes angezeigt und der Inhalt des Titelattributs des Bildes gelesen werden soll.

captionsSelector: null, // jQuery-Selektor – Element, das die Untertitel enthalten soll, z. B.: '#captions'
auto: false, // true, false – Diashow automatisch wechseln lassen. Diashow scrollt automatisch
autoDirection: 'next', // 'next', 'prev' – Richtung, in der Auto Show die Reihenfolge des automatischen Scrollens durchläuft
autoControls: false, // true, false – „Start“- und „Stopp“-Steuerelemente für die automatische Anzeige der Steuertasten für den automatischen Bildlauf anzeigen
autoControlsSelector: null, // jQuery-Selektor – Element, das die automatischen Steuerelemente enthalten soll, z. B.: '#auto-controls'
autoStart: true, // true, false – wenn false, wartet show auf die Aktivierung der „Start“-Steuerung
autoHover: false, // true, false – wenn true, wird die Show bei Mouseover angehalten. Wenn Sie den Mouseover festlegen, wird das automatische Scrollen angehalten
autoDelay: 0, // Ganzzahl – in ms, die Zeitspanne vor dem Start der automatischen Anzeige
Pause: 3000, // Ganzzahl – in ms, die Dauer zwischen den einzelnen Folienübergängen, Übergangszeit
startText: 'start', // string – Text, der für den Startschaltflächentext des Steuerelements „start“ angezeigt wird
startImage: '', // string – Dateipfad des Bildes, das für die „Start“-Steuerung verwendet wird, z. B.: „images/start.jpg“ Bild der Startschaltfläche
stopText: 'stop', // string – Text, der für das Steuerelement „stop“ angezeigt wird. Der Text der Stopp-Schaltfläche
stopImage: '', // string – Dateipfad des Bildes, das für die Stopp-Steuerung verwendet wird, z. B.: 'images/stop.jpg' Stopp-Schaltflächenbild
ticker: false, // true, false – kontinuierlicher Bewegungstickermodus (denken Sie an einen Nachrichtenticker)
// Hinweis: autoControls und autoControlsSelector gelten für Ticker! tickerSpeed: 5000, // Ganzzahl – hat einen umgekehrten Effekt auf die Geschwindigkeit, daher wird ein Wert von 10000
// Scrollen Sie sehr langsam, während ein Wert von 50 sehr schnell scrollt tickerDirection: 'next', // 'next', 'prev' – Richtung, in die sich die Ticker-Show bewegen wird
tickerHover: false, // true, false – wenn true, stoppt der Ticker bei Mouseover
wrapperClass: 'bx-wrapper', // string – Klassenname, der an den Slider-Wrapper angehängt ist
StartingSlide: 0, // Ganzzahl – Die Show beginnt auf der angegebenen Folie. Hinweis: Folien basieren auf Null displaySlideQty: 1, // Ganzzahl – Anzahl der Folien, die gleichzeitig angezeigt werden sollen
moveSlideQty: 1, // Ganzzahl – Anzahl der Folien, die gleichzeitig verschoben werden sollen
randomStart: false, // true, false – wenn true, beginnt die Show auf einer zufälligen Folie

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.