Enregistrement complet du processus de production de plug-in simple de commutation de carte de focus jQuery_jquery

La page d'accueil a souvent besoin d'un effet de changement d'image de focus, et les projets récents l'exigent également, j'ai donc cherché en ligne et trouvé un plug-in semi-fini que je l'ai modifié moi-même.

Il y a deux dossiers jquery.jslide.js et jquery.jslides.js sous le dossier js. Le premier a été réécrit par moi et le second est le fichier de l'auteur original. L'image ci-dessous est le rendu :

1. Effet statique

<div class="slide_wrap">
 <ul id="slides2" class="slide">
  <li style="background:url('images/01.jpg') no-repeat center top"><a href="http://www.jb51.net/" target="_blank">pwstrick1</a></li>
  <li style="background:url('images/02.jpg') no-repeat center top"><a href="http://www.jb51.net/" target="_blank">pwstrick2</a></li>
  <li style="background:url('images/03.jpg') no-repeat center top"><a href="http://www.jb51.net/" target="_blank">pwstrick3</a></li>
  <li style="background:url('images/04.jpg') no-repeat center top"><a href="http://www.jb51.net/" target="_blank">pwstrick4</a></li>
 </ul>
</div>

1. Le changement d'image de mise au point grand écran est désormais plus populaire. Dans le passé, les étiquettes utilisaient img pour afficher les images. Elles doivent désormais être remplacées par l'arrière-plan comme image d'arrière-plan, afin que les barres de défilement horizontales n'apparaissent pas.

2. Définissez un slide_wrap sur la surface la plus extérieure pour limiter le positionnement absolu des images à l'intérieur

J'ai initialement ajouté la classe dans 3.ul lors de l'initialisation du plug-in. Maintenant, je l'ai ajoutée à l'avance. L'effet d'affichage est meilleur que de l'ajouter plus tard. Vous pouvez apporter des modifications lors de la réécriture du plug-in<🎜. >

.slide_wrap {width:100%;height:400px;position:relative}
.slide_wrap .slide { display:block; width:100%; height:400px; list-style:none; padding:0; margin:0; position:relative;}
.slide_wrap .slide li { display:block; width:100%; height:100%; list-style:none; padding:0; margin:0; position:absolute;}
.slide_wrap .slide li a { display:block; width:100%; height:100%; text-indent:-9999px;}
.slide_wrap .pagination { display:block; list-style:none; position:absolute; left:50%; top:340px; z-index:9900;padding:5px 15px 5px 0; margin:0}
.slide_wrap .pagination li { display:block; list-style:none; width:10px; height:10px; float:left;margin-left:15px; border-radius:5px; background:#FFF }
.slide_wrap .pagination li a { display:block; width:100%; height:100%; padding:0; margin:0; text-indent:-9999px;outline:0}
.slide_wrap .pagination li.current { background:#0092CE}

1. L'attribut height dans slide_wrap et slide peut être modifié en fonction de la situation réelle

2. La pagination est le style du bouton dans l'image. Elle est utilisée pour contrôler quelle image est affichée. C'est également un positionnement absolu à gauche et en haut qui peut être modifié en fonction de la situation réelle.

3. Chaque couleur du style peut également être personnalisée selon l'effet recherché

4. Le style ci-dessus est un peu verbeux. Il peut être simplifié de manière appropriée lorsqu'il est intégré à votre propre projet

.

2. Méthode d'appel

<script type="text/javascript">
 $('#slides2').jslide();
</script>

1. Définissez ul comme plug-in d'image de focus

2. Chacune des opérations suivantes s'articulera autour de ul

3. Format commun du plug-in jQuery

;(function (factory) {
 'use strict';
 // Register as an AMD module, compatible with script loaders like RequireJS.
 if (typeof define === 'function' && define.amd) {
  define(['jquery'], factory);
 }
 else {
  factory(jQuery);
 }
}(function ($, undefined) {
 'use strict';

　　 //中间插件代码

 $.fn.jslide = function (method) {
  return _init.apply(this, arguments);
 };
}));

1. Le premier point-virgule sert à empêcher les erreurs de syntaxe d'être combinées avec d'autres codes sur une seule ligne lorsqu'elles sont compressées ensemble. Par exemple, var i=0(function(factory){......}(..);

2. 'use strict' active le mode strict, afin que l'interpréteur Javascript puisse utiliser la syntaxe "strict" pour analyser le code afin d'aider les développeurs à trouver les erreurs

3. Si le module requirejs est utilisé pour charger le framework, définir(['jquery'], factory) doit faire en sorte que le plug-in prenne en charge la spécification AMD

4. fonction ($, non défini) Le non défini ici est d'empêcher l'utilisation d'un défini réécrit lors de l'introduction d'autres fichiers js

5. _init est utilisé pour l'effet d'initialisation

4. Initialisation du plug-in

　　var defaults = {
  speed : 3000,
  pageCss : 'pagination',
  auto: true //自动切换
 };
 
 var nowImage = 0;//现在是哪张图片
 var pause = false;//暂停
 var autoMethod;
　　/**
  * @method private
  * @name _init
  * @description Initializes plugin
  * @param opts [object] "Initialization options"
  */
 function _init(opts) {
  opts = $.extend({}, defaults, opts || {});
  // Apply to each element
  var $items = $(this);
  for (var i = 0, count = $items.length; i < count; i++) {
   _build($items.eq(i), opts);
  }
  return $items;
 }

1. Les valeurs par défaut sont des paramètres personnalisés exposés. Ici, j'ai écrit trois vitesses de commutation automatique, les styles de boutons de sélection et l'opportunité d'automatiser

.

2. Trois paramètres globaux, nowImage est le numéro de série de l'image actuellement affichée, pause contrôle si l'image est commutée ou mise en pause, et autoMethod est le numéro de la fonction de synchronisation

3. Les paramètres personnalisés sont fusionnés dans _init et _build est appelé pour créer l'opération

5. Diverses opérations de création d'un plug-in

  /**
  * @method private
  * @name _getSlides
  * @description 获取幻灯片对象
  * @param $node [jQuery object] "目标对象"
  */
 function _getSlides($node) {
  return $node.children('li');
 }
  /**
  * @method private
  * @name _build
  * @description Builds each instance
  * @param $node [jQuery object] "目标对象"
  * @param opts [object] "插件参数"
  */
 function _build($node, opts) {
  var $slides = _getSlides($node);
  $slides.eq(0).siblings('li').css({'display':'none'});
  var numpic = $slides.size() - 1;
  
  $node.delegate('li', 'mouseenter', function() {
   pause = true;//暂停轮播
   clearInterval(autoMethod);
  }).delegate('li', 'mouseleave', function() {
   pause = false;
   autoMethod = setInterval(function() {
    _auto($slides, $pages, opts);
   }, opts.speed);
  });
  //console.log(autoMethod)
  var $pages = _pagination($node, opts, numpic);
  
  if(opts.auto) {
   autoMethod = setInterval(function() {
    _auto($slides, $pages, opts);
   }, opts.speed);
  }
 } 

1. _getSlides est utilisé pour obtenir la sous-balise li de l'objet ul, qui est le plug-in focus map

2. Définissez d'autres balises à l'exception de la première balise li à masquer

3. Obtenez le nombre d'images commutées. Puisque la boucle suivante commence à l'indice 0 et effectue l'opération <=, un 1 est soustrait. En fait, il est normal de ne pas soustraire ici. Cela dépend des préférences personnelles. 🎜>

4. Définissez les événements mouseenter et mouseleave pour la balise li, qui doivent respectivement annuler la boucle et continuer la boucle

5. Bouton de sélection d'initialisation

6. Si le paramètre auto est vrai, la commutation automatique sera activée

6. Bouton de sélection d'initialisation

1. Ajoutez dynamiquement la balise bouton ul, attribuez-lui une classe personnalisée et ajoutez la sous-balise li

　　 /**
  * @method private
  * @name _pagination
  * @description 初始化选择按钮
  * @param $node [jQuery object] "目标对象"
  * @param opts [Object] "参数"
  * @param size [int] "图片数量"
  */
  function _pagination($node, opts, size) {
  var $ul = $('<ul>', {'class': opts.pageCss});
  for(var i = 0; i <= size; i++){
   $ul.append('<li>' + '<a href="javascript:void(0)">' + (i+1) + '</a>' + '</li>');
  }
  
  $ul.children(':first').addClass('current');//给第一个按钮选中样式
  var $pages = $ul.children('li');
  $ul.delegate('li', 'click', function() {//绑定click事件
   var changenow = $(this).index();
   _changePage($pages, $node, changenow);
  }).delegate('li', 'mouseenter', function() {
   pause = true;//暂停轮播
  }).delegate('li', 'mouseleave', function() {
   pause = false;
  });
  $node.after($ul);
  return $pages;
  }

2. Ajoutez un style de sélection au premier bouton

3. Ajoutez les événements click, mouseenter et mouseleave à la balise li et liez l'événement click à l'opération de commutation

4. Placez le bouton de pagination derrière l'objet plug-in ul

5. Revenez à l'objet li dans le bouton de pagination, qui sera utile plus tard

7. Changer de photo

1. Augmentez l'index z de l'image actuelle, augmentez l'index z de l'image suivante et affichez l'image suivante. Cela peut créer un effet de dégradé, ce qui sera très déroutant. 🎜>

 　　/**
  * @method private
  * @name _change
  * @description 幻灯片显示与影藏
  * @param $slides [jQuery object] "图片对象"
  * @param $pages [jQuery object] "按钮对象"
  * @param next [int] "要显示的下一个序号"
  */
  function _fadeinout($slides, $pages, next){
  $slides.eq(nowImage).css('z-index','2');
  $slides.eq(next).css({'z-index':'1'}).show();
  $pages.eq(next).addClass('current').siblings().removeClass('current');
  $slides.eq(nowImage).fadeOut(400, function(){
   $slides.eq(next).fadeIn(500);
  });
 }

2. Ajoutez un style de sélection au bouton de sélection suivant

3. Utilisez fadeOut et fadeIn de jQuery pour créer des effets de dégradé cachés et affichés

8. Cycle automatique

1. Déterminez s'il faut mettre en pause ou continuer le carrousel

　　 /**
  * @method private
  * @name _auto
  * @description 自动轮播
  * @param $slides [jQuery object] "图片对象"
  * @param $pages [jQuery object] "按钮对象"
  * @param opts [Object] "参数"
  */
  function _auto($slides, $pages, opts){
  var next = nowImage + 1;
  var size = $slides.size() - 1;
  if(!pause) {
   if(nowImage >= size){
    next = 0;
   }
   
   _fadeinout($slides, $pages, next);
   
   if(nowImage < size){
    nowImage += 1;
   }else {
    nowImage = 0;
   }
  }else {
   clearInterval(autoMethod);//暂停的时候就取消自动切换
  }
  }

2. S'il n'est pas en pause, définissez les numéros de série de la page en cours et du bouton suivant selon les conditions

Il y a encore de nombreux problèmes avec le plug-in, comme l'impossibilité de lier deux objets différents sur une seule page, et il y a une énorme marge de modification.

Grâce à cette modification, j'ai un plug-in de commutation de carte de mise au point contrôlable. Bien qu'il y ait encore de nombreux problèmes, ils peuvent être résolus étape par étape. Il sera beaucoup plus pratique de l'intégrer dans votre propre projet à l'avenir.

démo :

http://demo.jb51.net/js/2014/jsilde/

Télécharger : http://www.jb51.net/jiaoben/210405.html