찾다
웹 프론트엔드JS 튜토리얼jQuery 포커스 맵 전환 단순 플러그인 제작 과정 전체 기록_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

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
jquery实现多少秒后隐藏图片jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

axios与jquery的区别是什么axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

jquery怎么修改min-height样式jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

jquery怎么在body中增加元素jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

jquery中apply()方法怎么用jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

jquery怎么删除div内所有子元素jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

jquery on()有几个参数jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

jquery怎么去掉只读属性jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구