jQuery 포커스 맵 전환 단순 플러그인 제작 과정 전체 기록

홈페이지에서 초점 이미지 전환 효과가 필요한 경우가 많고, 최근 프로젝트에서도 필요해서 온라인으로 검색하다가 반제품 플러그인을 찾아서 직접 수정했습니다.

js 폴더 아래에는 jquery.jslide.js와 jquery.jslides.js라는 두 개의 폴더가 있습니다. 첫 번째는 제가 다시 작성한 것이고, 두 번째는 원저자의 파일입니다. 아래 사진은 렌더링입니다:

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. 첫 번째 세미콜론은 함께 압축할 때 구문 오류가 한 줄에 다른 코드와 결합되는 것을 방지하기 위한 것입니다. 예를 들어 var i=0(function(factory){......}(..);

2. '엄격한 사용'은 엄격 모드를 활성화하여 개발자가 오류를 찾는 데 도움이 되도록 Javascript 해석기가 "엄격한" 구문을 사용하여 코드를 구문 분석할 수 있도록 합니다.

3. requirejs 모듈을 사용하여 프레임워크를 로드하는 경우, Define(['jquery'], Factory)는 플러그인이 AMD 사양을 지원하도록 만드는 것입니다.

4. 함수($, undefine) 여기서 undefine은 다른 js 파일을 도입할 때 undefine을 다시 쓰는 것을 방지하기 위한 것입니다

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. 기본값은 노출된 맞춤 매개변수입니다. 여기에는 세 가지 자동 전환 속도, 선택 버튼 스타일, 자동화 여부를 작성했습니다.

2. 3개의 전역 매개변수, nowImage는 현재 표시된 이미지의 일련 번호이고, 일시 중지는 이미지 전환 또는 일시 중지 여부를 제어하며, autoMethod는 타이밍 함수의 번호입니다.

3. 맞춤 매개변수가 _init에 병합되고 _build가 호출되어 작업이 생성됩니다.

5. 플러그인 생성의 다양한 작업

  /**
  * @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는 포커스 맵 플러그인인 ul 개체의 li 하위 태그를 가져오는 데 사용됩니다.

2. 첫 번째 li 태그를 제외한 다른 태그를 숨기도록 설정합니다

3. 뒤따르는 루프는 첨자 0부터 시작해서 <= 연산을 하기 때문에 사실 여기서는 빼지 않아도 괜찮습니다. 🎜>

4. li 태그에 대해 각각 루프를 취소하고 루프를 계속하는 mouseenter 및 mouseleave 이벤트를 설정합니다.

5. 초기화 선택 버튼

6. 매개변수 auto가 true이면 자동 전환이 활성화됩니다

6. 초기화 선택 버튼

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

로그인 후 복사

1. 버튼 ul 태그를 동적으로 추가하고, 사용자 정의 클래스를 할당하고, 하위 태그 li를 추가합니다

2. 첫 번째 버튼에 선택 스타일 추가

3. li 태그에 click, mouseenter 및 mouseleave 이벤트를 추가하고 click 이벤트를 전환 작업에 바인딩합니다.

4. 플러그인 개체 ul 뒤에 페이징 버튼을 배치합니다.

5. 나중에 유용하게 사용할 페이징 버튼의 li 객체로 돌아갑니다.

7. 사진 바꾸기

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

로그인 후 복사

1. 현재 사진의 Z-인덱스를 늘리고 다음 사진을 표시합니다. 그렇지 않으면 매우 혼란스러울 수 있습니다. 🎜>

2. 다음 선택 버튼에 선택 스타일 추가

3. jQuery의 fadeOut 및 fadeIn을 사용하여 숨겨진 및 표시되는 그라데이션 효과 만들기

8. 자동주기

1. 캐러셀을 일시중지할지 계속할지 결정합니다.

　　 /**
  * @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. 일시정지가 아닌 경우 조건에 맞게 현재 페이지의 일련번호와 다음 버튼을 설정하세요

한 페이지에 서로 다른 두 개체를 묶을 수 없는 등 플러그인에는 여전히 많은 문제가 있으며 수정의 여지가 큽니다.

이번 수정을 통해 제어 가능한 포커스 맵 전환 플러그인이 생겼습니다. 아직 문제가 많지만 차근차근 해결해 나갈 수 있을 것입니다. 앞으로는 자신의 프로젝트에 이를 포함시키는 것이 훨씬 더 편리할 것입니다.

데모:

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

다운로드: http://www.jb51.net/jiaoben/210405.html