jquery slide plug-in bxslider-Stilverbesserung example

jquery slide plug-in bxslider-Stilverbesserung example_jquery

WBOY

Freigeben： 2016-05-16 16:33:56

Original

1356 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie Sie den Stil des jquery-Diashow-Plug-ins bxslider verbessern können, und teilt es als Referenz mit allen. Die Details lauten wie folgt:

Ich habe viele JQuery-Folien verglichen und festgestellt, dass sie nicht sehr gut sind. Schließlich habe ich festgestellt, dass bxslider die beste Kompatibilität aufweist und das manuelle Umblättern auf Mobilgeräten unterstützt.

Aber der offizielle Anzeigeeffekt ist wirklich hässlich und inakzeptabel. Am Ende musste ich es selbst basteln.

Der offizielle Stil von bxslider ist wie folgt:

Der geänderte Stil lautet wie folgt:

Schritt 1: bxslider vorstellen

Code kopieren Der Code lautet wie folgt:

Schritt 2: bxslider-HTML-Code hinzufügen

Code kopieren

Der Code lautet wie folgt:

Der ursprüngliche offizielle HTML-Code sieht so aus:

Code kopieren

Der Code lautet wie folgt:

Auf dieser Grundlage wird ein DIV der übergeordneten Ebene von slider_block erstellt und die Position auf relativ gesetzt, hauptsächlich um die Seiten „1, 2, 3“ für die absolute Positionierung des untergeordneten Layers slider-pager umzublättern.

Schritt 3: Ändern Sie CSS jquery.bxslider.css und fügen Sie CSS-Stiloptimierung für Slider-Pager hinzu

Code kopieren

Der Code lautet wie folgt: #slider_block{position: relative;margin: 0 auto;height: 245px;margin-top:10px;overflow:hidden;} #slider-pager{position: absolute;unten: 10px;rechts: 10px;z-index: 999;font-size: 0px;} #slider-pager .pager-link {float: left;width: 15px;height: 15px;line-height: 15px;text-align: center;margin: 0 0 0 10px;background: #FC0;color: #930; } #slider-pager .active {Hintergrund: #0C3;Farbe: #fff;}

/*Schatteneffekt entfernen, Browser ist nicht mit 4jcms kompatibel */
/*.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc
-webkit-box-shadow: 0 0 5px #ccc
box-shadow: 0 0 5px #ccc
Rand: durchgehend #fff 5px; Links: -5px;
Hintergrund: #fff;
}

*/
#slider_block{position: relative;margin: 0 auto;height: 245px;margin-top:10px;overflow:hidden;}
#slider-pager{position: absolute;unten: 10px;rechts: 10px;z-index: 999;font-size: 0px;}
#slider-pager .pager-link {float: left;width: 15px;height: 15px;line-height: 15px;text-align: center;margin: 0 0 0 10px;background: #FC0;color: #930; }
#slider-pager .active {Hintergrund: #0C3;Farbe: #fff;}

/*Schatteneffekt entfernen, Browser ist nicht mit 4jcms kompatibel */
/*.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
Rand: einfarbig #fff 5px; links: -5px;

Hintergrund: #fff;
}
*/

Endgültige Renovierung abgeschlossen