jQueryフォーカスマップ切り替え簡易プラグイン制作過程全記録

ホームページにはフォーカス画像の切り替えエフェクトが必要になることが多く、最近のプロジェクトでも必要になったので、ネットで検索したところ、中途半端なプラグインを見つけて自分で修正しました。

js フォルダーの下に jquery.jslide.js と jquery.jslides.js の 2 つのフォルダーがあります。1 つ目は私が書き換えたもので、2 つ目はオリジナルの作成者のファイルです。下の図はレンダリングです:

1. 静的効果

<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. ワイドスクリーンのフォーカス画像の切り替えは、以前は画像を表示するために img を使用していましたが、現在は背景画像として背景に置き換える必要があるため、水平スクロールバーは表示されません。

2. 最外側のサーフェスに slide_wrap を設定して、

内の画像の絶対位置を制限します。

プラグインの初期化時に 3.ul にクラスを追加しましたが、後で追加するよりも表示効果が向上します。

.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. slide_wrap と slide の高さ属性は、実際の状況に応じて変更できます

2. ページネーションは画像内のボタンのスタイルであり、実際の状況に応じて変更できる左と上の絶対位置を制御するために使用されます。

3. スタイルの各色は、希望の効果に応じてカスタマイズすることもできます

4. 上記のスタイルは少し冗長ですが、独自のプロジェクトに埋め込む場合は適切に簡略化できます。

2. メソッドの呼び出し

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

ログイン後にコピー

1. ul をフォーカス画像プラグインとして設定します

2. 以下の各操作は ul

を中心に展開します。

3. 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. 最初のセミコロンは、圧縮時に他のコードと結合して 1 行に構文エラーが発生するのを防ぐためのものです。たとえば、var i=0(function(factory){......}(..);

2. 「use strict」は strict モードをオンにし、JavaScript インタープリタが「strict」構文を使用してコードを解析し、開発者がエラーを見つけられるようにします

3. requirejs モジュールを使用してフレームワークをロードする場合、define(['jquery'], Factory) はプラグインが AMD 仕様をサポートするようにします

4. 関数($, unfineed) ここでの未定義は、他のjsファイルを導入する際に書き換えられた未定義を使用しないようにするためのものです

5. _init は初期化効果に使用されます

4. プラグインの初期化

　　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. デフォルトは公開されたカスタムパラメータです。ここでは 3 つの自動切り替え速度、選択ボタンのスタイル、および自動化するかどうかを記述しました。

2. 3 つのグローバルパラメーター、nowImage は現在表示されている画像のシリアル番号、pause は画像を切り替えるか一時停止するかを制御します、autoMethod はタイミング関数の番号です

3. カスタムパラメーターが _init にマージされ、_build が呼び出されてオペレーションが作成されます

5. プラグイン作成の各種操作

1. _getSlides は、フォーカスマッププラグインである ul オブジェクトの li サブタグを取得するために使用されます

  /**
  * @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);
  }
 }

ログイン後にコピー

2. 最初の li タグ以外のタグを非表示に設定します

3. 後続のループは添え字 0 から始まり、1 が減算されます。実際には、個人の好みによって異なります。 🎜>

4. liタグにmouseenterイベントとmouseleaveイベントを設定します。これらはそれぞれループをキャンセルし、ループを継続します

5.初期化選択ボタン

6. パラメータ auto が true の場合、自動切り替えが有効になります

6.初期化選択ボタン

1. ボタン ul タグを動的に追加し、カスタムクラスを割り当て、サブタグ 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. 最初のボタンに選択スタイルを追加します

3. click、mouseenter、mouseleave イベントを li タグに追加し、click イベントを切り替え操作にバインドします

4. ページングボタンをプラグインオブジェクト ul

の後ろに配置します。

5. ページングボタンの li オブジェクトに戻ります。これは後で役立ちます

7. 写真を切り替えます

1. 現在のピクチャの Z インデックスを増やし、次のピクチャを表示します。そうしないと、非常にわかりにくくなります。 🎜>

2. 次の選択ボタンに選択スタイルを追加します

 　　/**
  * @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);
  });
 }

ログイン後にコピー

3. jQuery のフェードアウトとフェードインを使用して、非表示および表示のグラデーション効果を作成します

8. 自動サイクル

1. カルーセルを一時停止するか続行するかを決定します

2. 一時停止していない場合は、現在のページと次へのボタンのシリアル番号を条件に従って設定します

　　 /**
  * @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);//暂停的时候就取消自动切换
  }
  }

ログイン後にコピー

このプラグインには、1 ページに 2 つの異なるオブジェクトをバインドできないなど、まだ多くの問題があり、修正の余地が大きくあります。

この修正により、制御可能なフォーカスマップ切り替えプラグインが完成しました。まだ多くの問題がありますが、段階的に解決できます。将来的には、それを自分のプロジェクトに埋め込むとさらに便利になるでしょう。

デモ:

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

ダウンロード:

http://www.jb51.net/jiaoben/210405.html