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.

tr>

Parameter

Beschreibung

Standardwert

height

Die anfängliche Höhe, Anzahl, Breite und Höhe des Schiebereglers werden verwendet, um eine adaptive Skalierung der Schiebereglergröße sicherzustellen.

320

Start

Anfängliche Gleitposition, von welcher Zahl aus mit dem Gleiten begonnen werden soll, Zahl

1

Geschwindigkeit

Gleitgeschwindigkeit, Einheit ms, Anzahl

600

Intervall

Slider-Gleitintervallzeit, Einheit ms, Zahl

3000

autoPlay

Ob automatisch gleitend, boolesch wahr/falsch

falsch

dotShow

Ob die Punktnavigation angezeigt werden soll, boolesch wahr/falsch

true

arrShow

Gibt an, ob die Pfeilnavigation nach links und rechts angezeigt werden soll, Boolean true/false

true

touch

Ob Touch-Sliding unterstützt werden soll, Boolean true/false

true

afterSlider

Rückruffunktion, rufen Sie diese Funktion auf, nachdem Sie einen Schieberegler verschoben haben

参数	描述	默认值
height	滑块的初始高度，数字，宽度和高度用于确保自适应等比例缩放滑块大小。	320
start	初始滑动位置，从第几个开始滑动，数字	1
speed	滑动速度，单位ms，数字	600
interval	滑块滑动间隔时间，单位ms，数字	3000
autoPlay	是否自动滑动，布尔型true/false	false
dotShow	是否显示圆点导航，布尔型true/false	true
arrShow	是否显示左右方向箭头导航，布尔型true/false	true
touch	是否支持触摸滑动，布尔型true/false	true
afterSlider	回调函数，滑动一个滑块后，调用该函数

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 (www.php.cn).