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.

tr>

Paramètre

Description

Valeur par défaut

hauteur

La hauteur initiale, le nombre, la largeur et la hauteur du curseur sont utilisés pour garantir une mise à l'échelle adaptative de la taille du curseur.

320

début

Position initiale de glissement, à partir de quel numéro commencer à glisser, numéro

1

vitesse

Vitesse de glissement, unité ms, nombre

600

intervalle

Temps d'intervalle coulissant du curseur, unité ms, nombre

3000

lecture automatique

Si automatique coulissant, booléen vrai/faux

faux

dotShow

S'il faut afficher la navigation par points, booléen vrai/faux

true

arrShow

S'il faut afficher la navigation par flèches gauche et droite, booléen vrai/faux

true

touch

S'il faut prendre en charge le glissement tactile, booléen vrai/faux

vrai

afterSlider

Fonction de rappel, appelez cette fonction après avoir fait glisser un curseur

参数	描述	默认值
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	回调函数，滑动一个滑块后，调用该函数

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