hwSlider-Content-Slide-Switching-Effekt (3): jquery.hwSlide.js Plug-in-Kapselung

Nach den Erläuterungen in den ersten beiden Teilen kennen wir grob die grundlegenden Entwicklungsideen und Techniken des Content-Sliding-Switching. Im dritten Teil optimieren wir nun den Code in den ersten beiden Teilen und kapseln ihn in ein jQuery-Plugin : jquery.hwSlide.js. Entwickler können problemlos verschiedene Bildkarusselleffekte, Fokusbildeffekte sowie gemischte Grafik- und Textgleiteffekte erstellen.



Demo-Download-Quellcode anzeigen

hwSlider verfügt über die folgenden Funktionen:

Anpassung mehrerer Parameter , Erfüllen Sie unterschiedliche Projektanforderungen.

Unterstützt Touch-Sliding auf Mobilgeräten.

Unterstützt die gemischte Anordnung von Bildern und Text sowie verschiedene HTML-Elemente.

Reagiert und passt sich der Bildschirmgröße an.

Dieselbe Seite unterstützt mehrere Schiebeschalter.

Leichtgewichtig, die komprimierte Version ist weniger als 4 KB groß.

Unterstützt alle modernen Browser, unterstützt ie8+.

HTML

Laden Sie zunächst die für hwSlider erforderlichen grundlegenden CSS-Stildateien sowie die JQuery-Bibliotheksdatei und das hwSlider-Plug-In Natürlich empfehle ich, die js-Datei unten auf der Seite in Loads einzufügen.

[code=html]
<link type="text/css"  rel="stylesheet" href="css/hwslider.css" />
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hwSlider.js"></script>

Fügen Sie dann den folgenden HTML-Code zum Textkörper hinzu:

[code=html]
<p class="hwslider">
	<ul>
		<li><img src="images/s1.jpg" alt=""></li>
		<li><img src="images/s2.jpg" alt=""></li>
		<li>hwSlider.js</li>
	</ul>
</p>

Folgen Sie dem Code-Layout Über der HTML-Struktur enthält jedes li-Element einen Schieberegler, und der Inhalt des Schiebereglers kann aus Bildern, Text oder einer Mischung aus Bildern und Texten usw. bestehen.

jQuery

Folgen Sie der jQuery-Plug-in-Entwicklungsvorlage. Interessierte Schüler können diesen Artikel über die Einführung der jQuery-Plug-in-Vorlage lesen: jQuery-Popup-Layer-Plug -in-hwLayer, I Der Code wurde in ein jQuery-Plug-in gekapselt: jquery.hwSlider.js Bitte laden Sie den Quellcode herunter, um den spezifischen Code anzuzeigen. Der Aufruf des Flexslider-Plugins ist sehr einfach. Verwenden Sie den folgenden Code:

[code=js]
$(function() { 
    $(".hwslider").hwSlider(); 
});

Führen Sie die Seite aus, um den Slider-Effekt zu sehen. Beachten Sie, dass hwSlider standardmäßig die Slider-Größe von 600 x 320 verwendet. Sie können die Standard-Slider-Anfangsgröße ändern, indem Sie Optionen festlegen.

hwSlider-Optionseinstellungen

hwSlider bietet einfache und praktische Optionseinstellungen, die Entwickler entsprechend ihren Anforderungen festlegen können.

Das Obige ist der Inhalt des hwSlider-content-Slide-Switching-Effekts (3): jquery.hwSlide.js Plug-in-Paket. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com).