Effet de commutation coulissante hwSlider-content (3) : encapsulation du plug-in jquery.hwSlide.js

Après les explications des deux premières parties, nous connaissons à peu près les idées et techniques de développement de base de la commutation coulissante de contenu. Maintenant, dans la troisième partie, nous optimisons le code des deux premières parties et l'encapsulons dans un plug-in jQuery. : jquery.hwSlide.js. Les développeurs peuvent facilement créer divers effets de carrousel d’images, des effets d’image de focalisation et des effets de glissement mixtes graphiques et textuels.



Afficher le code source de téléchargement de la démo

hwSlider possède les fonctionnalités suivantes :

Personnalisation de plusieurs paramètres , Répondre aux différents besoins du projet.

Prend en charge le glissement tactile sur les appareils mobiles.

Prend en charge la disposition mixte d'images et de texte, ainsi que divers éléments HTML.

Réactif et adaptatif à la taille de l'écran.

La même page prend en charge plusieurs commutateurs coulissants.

Légère, la version compressée fait moins de 4 Ko.

Prend en charge tous les navigateurs modernes, y compris ie8.

HTML

Chargez d'abord les fichiers de style CSS de base requis par hwSlider dans l'en-tête de la page, ainsi que le fichier de la bibliothèque jquery et le plug-in hwSlider de. Bien sûr, je recommande de mettre le fichier js dans Loads en bas de page.

[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>

Ajoutez ensuite le code HTML suivant dans le corps :

[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>

Suivez la disposition du code au-dessus de la structure HTML, chaque élément li contient un curseur, et le contenu du curseur peut être constitué d'images, de texte ou d'un mélange d'images et de textes, etc.

jQuery

Suivez le modèle de développement de plug-in jQuery. Les étudiants intéressés peuvent lire cet article sur l'introduction du modèle de plug-in jQuery : plug-in de couche contextuelle jQuery. -in-hwLayer, I Le code a été encapsulé dans un plug-in jQuery : jquery.hwSlider.js Veuillez télécharger le code source pour afficher le code spécifique. Appeler le plug-in Flexslider est très simple. Utilisez le code suivant :

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

Exécutez la page pour voir l'effet du curseur. Notez que hwSlider utilise la taille du curseur de 600 x 320 par défaut. Vous pouvez modifier la taille initiale du curseur par défaut en définissant les options.

Paramètres d'options hwSlider

hwSlider fournit des paramètres d'options simples et pratiques que les développeurs peuvent définir en fonction de leurs besoins.

Ce qui précède est le contenu de l'effet de commutation coulissante hwSlider-content (3) : package de plug-in jquery.hwSlide.js Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !