jQuery焦點(diǎn)圖切換簡易插件制作過程全紀(jì)錄

更新時(shí)間：2014年08月27日 12:08:37 投稿：hebedich

本文主要講訴了本人制作一個(gè)jquery焦點(diǎn)圖切換的簡易插件的過程，十分的詳細(xì)，希望對(duì)大家能有所幫助

首頁經(jīng)常是需要一個(gè)焦點(diǎn)圖切換的效果，最近做的項(xiàng)目也正好需要，所以在網(wǎng)上搜索，后面查到了一個(gè)半成品的插件，這里我自己修改了一下。

js文件夾下面有兩個(gè)文件夾jquery.jslide.js與jquery.jslides.js，前面一個(gè)是我改寫的，第二個(gè)是原作者的文件。下圖是效果圖：

一、靜態(tài)效果

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

1.現(xiàn)在比較流行寬屏的焦點(diǎn)圖切換，以前標(biāo)簽都是用img來顯示圖片的，現(xiàn)在得換成background做背景圖，這樣就不會(huì)出現(xiàn)橫向滾動(dòng)條啦。

2.最外面套個(gè)slide_wrap用來做限制里面圖片的絕對(duì)定位

3.ul中的class原先我是在插件初始化的時(shí)候添加上去的，現(xiàn)在我預(yù)先就加上了，顯示效果比后面添加要好一點(diǎn)，大家可以在改寫插件的時(shí)候做修改

.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中的height屬性可以根據(jù)實(shí)際情況修改

2、pagination是圖中的按鈕樣式，用來控制顯示第幾張圖，也是絕對(duì)定位left與top可以根據(jù)實(shí)際情況修改

3、樣式中的各個(gè)顏色也可以根據(jù)想要的效果做個(gè)性化修改

4、上面的樣式寫的有點(diǎn)啰嗦，在嵌入自己的項(xiàng)目中，可以適當(dāng)精簡

二、調(diào)用方式

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

1、將ul設(shè)置成焦點(diǎn)圖插件

2、下面的各個(gè)操作都將圍繞著ul轉(zhuǎn)

三、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、第一個(gè)分號(hào)是為了防止在與其他代碼壓縮到一起的時(shí)候合在一行中，這樣會(huì)出現(xiàn)語法錯(cuò)誤。例如var i=0(function(factory){......}(..);

2、'use strict'是開啟嚴(yán)格模式，使Javascript解釋器可以用"嚴(yán)格"的語法來解析代碼，以幫助開發(fā)人員發(fā)現(xiàn)錯(cuò)誤

3、如果使用了requirejs模塊載入框架，define(['jquery'], factory)這句就是讓插件支持AMD規(guī)范

4、function ($, undefined) 這里面的undefined是為了防止在引入其他js文件的時(shí)候，使用被重寫了的undefined

5、_init是用于初始化效果

四、插件初始化

　　var defaults = {
  speed : 3000,
  pageCss : 'pagination',
  auto: true //自動(dòng)切換
 };
 
 var nowImage = 0;//現(xiàn)在是哪張圖片
 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、defaults是暴露出來的自定義參數(shù)，這里我就寫了三個(gè)自動(dòng)切換的速度、選擇按鈕樣式、是否自動(dòng)化

2、三個(gè)全局參數(shù)，nowImage是當(dāng)前顯示圖片的序號(hào)、pause是控制圖片是切換還是暫停，autoMethod是定時(shí)函數(shù)的編號(hào)

3、_init中有合并自定義參數(shù)，調(diào)用_build做創(chuàng)建操作

五、創(chuàng)建插件各個(gè)操作

  /**
  * @method private
  * @name _getSlides
  * @description 獲取幻燈片對(duì)象
  * @param $node [jQuery object] "目標(biāo)對(duì)象"
  */
 function _getSlides($node) {
  return $node.children('li');
 }
  /**
  * @method private
  * @name _build
  * @description Builds each instance
  * @param $node [jQuery object] "目標(biāo)對(duì)象"
  * @param opts [object] "插件參數(shù)"
  */
 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用于獲取ul這個(gè)對(duì)象的li子標(biāo)簽，ul也就是這個(gè)焦點(diǎn)圖插件

2、將除了第一個(gè)li標(biāo)簽，其他標(biāo)簽設(shè)置為隱藏

3、獲取切換圖片的數(shù)量，由于后面做循環(huán)是從下標(biāo)0開始，做<=操作，所以減去一個(gè)1，其實(shí)這里不減也是可以的，看個(gè)人喜好

4、給li標(biāo)簽設(shè)置mouseenter與mouseleave的事件，分別是取消循環(huán)與繼續(xù)循環(huán)

5、初始化選擇按鈕

6、參數(shù)auto如果為true，就激活自動(dòng)切換

六、初始化選擇按鈕

　　 /**
  * @method private
  * @name _pagination
  * @description 初始化選擇按鈕
  * @param $node [jQuery object] "目標(biāo)對(duì)象"
  * @param opts [Object] "參數(shù)"
  * @param size [int] "圖片數(shù)量"
  */
  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');//給第一個(gè)按鈕選中樣式
  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;
  }

1、動(dòng)態(tài)添加按鈕ul標(biāo)簽，賦上一個(gè)自定義class，將子標(biāo)簽li加上

2、將第一個(gè)按鈕加上選中樣式

3、給li標(biāo)簽加上click、mouseenter與mouseleave的事件，click事件綁定切換操作

4、把分頁按鈕放到插件對(duì)象ul的后面

5、返回分頁按鈕中的li對(duì)象，后面有用的

七、切換圖片

 　　/**
  * @method private
  * @name _change
  * @description 幻燈片顯示與影藏
  * @param $slides [jQuery object] "圖片對(duì)象"
  * @param $pages [jQuery object] "按鈕對(duì)象"
  * @param next [int] "要顯示的下一個(gè)序號(hào)"
  */
  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);
  });
 }

1、將當(dāng)前的圖片z-index加大，下一張圖片的z-index也加大，顯示下一張圖，這樣能做出一種漸變的效果，不加的話就會(huì)是很生硬的切換

2、選擇按鈕的下一個(gè)增加選中樣式

3、應(yīng)用jQuery的fadeOut與fadeIn做隱藏與顯示的漸變特效

八、自動(dòng)循環(huán)

　　 /**
  * @method private
  * @name _auto
  * @description 自動(dòng)輪播
  * @param $slides [jQuery object] "圖片對(duì)象"
  * @param $pages [jQuery object] "按鈕對(duì)象"
  * @param opts [Object] "參數(shù)"
  */
  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);//暫停的時(shí)候就取消自動(dòng)切換
  }
  }

1、判斷是暫停還是繼續(xù)輪播

2、如果不是暫停，就根據(jù)條件做當(dāng)前頁與下一個(gè)按鈕的序號(hào)設(shè)置

插件還有很多問題，比如不能在一個(gè)頁面綁定兩個(gè)不同的對(duì)象，還有巨大的修改空間。

通過這次的修改，自己有了一個(gè)可以控制的焦點(diǎn)圖切換插件，雖然還有很多問題但可以一步一步解決。以后嵌入到自己的項(xiàng)目中，修改起來也方便很多。

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

下載： http://m.dhdzp.com/jiaoben/210405.html

您可能感興趣的文章: