jQuery焦点图切换简易插件制作过程全纪录


Posted in Javascript onAugust 27, 2014

首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下。

js文件夹下面有两个文件夹jquery.jslide.js与jquery.jslides.js,前面一个是我改写的,第二个是原作者的文件。下图是效果图:

jQuery焦点图切换简易插件制作过程全纪录

一、静态效果

<div class="slide_wrap">
 <ul id="slides2" class="slide">
  <li style="background:url('images/01.jpg') no-repeat center top"><a href="https://3water.com/" target="_blank">pwstrick1</a></li>
  <li style="background:url('images/02.jpg') no-repeat center top"><a href="https://3water.com/" target="_blank">pwstrick2</a></li>
  <li style="background:url('images/03.jpg') no-repeat center top"><a href="https://3water.com/" target="_blank">pwstrick3</a></li>
  <li style="background:url('images/04.jpg') no-repeat center top"><a href="https://3water.com/" target="_blank">pwstrick4</a></li>
 </ul>
</div>
1.现在比较流行宽屏的焦点图切换,以前标签都是用img来显示图片的,现在得换成background做背景图,这样就不会出现横向滚动条啦。

2.最外面套个slide_wrap用来做限制里面图片的绝对定位

3.ul中的class原先我是在插件初始化的时候添加上去的,现在我预先就加上了,显示效果比后面添加要好一点,大家可以在改写插件的时候做修改

.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属性可以根据实际情况修改

2、pagination是图中的按钮样式,用来控制显示第几张图,也是绝对定位left与top可以根据实际情况修改

3、样式中的各个颜色也可以根据想要的效果做个性化修改

4、上面的样式写的有点??拢?谇度胱约旱南钅恐校?梢允实本??/p>

二、调用方式

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

1、将ul设置成焦点图插件

2、下面的各个操作都将围绕着ul转

三、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、'use strict'是开启严格模式,使Javascript解释器可以用"严格"的语法来解析代码,以帮助开发人员发现错误

3、如果使用了requirejs模块载入框架,define(['jquery'], factory)这句就是让插件支持AMD规范

4、function ($, undefined) 这里面的undefined是为了防止在引入其他js文件的时候,使用被重写了的undefined

5、_init是用于初始化效果

四、插件初始化

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、defaults是暴露出来的自定义参数,这里我就写了三个自动切换的速度、选择按钮样式、是否自动化

2、三个全局参数,nowImage是当前显示图片的序号、pause是控制图片是切换还是暂停,autoMethod是定时函数的编号

3、_init中有合并自定义参数,调用_build做创建操作

五、创建插件各个操作

/**
  * @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子标签,ul也就是这个焦点图插件

2、将除了第一个li标签,其他标签设置为隐藏

3、获取切换图片的数量,由于后面做循环是从下标0开始,做<=操作,所以减去一个1,其实这里不减也是可以的,看个人喜好

4、给li标签设置mouseenter与mouseleave的事件,分别是取消循环与继续循环

5、初始化选择按钮

6、参数auto如果为true,就激活自动切换

六、初始化选择按钮

/**
  * @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标签,赋上一个自定义class,将子标签li加上

2、将第一个按钮加上选中样式

3、给li标签加上click、mouseenter与mouseleave的事件,click事件绑定切换操作

4、把分页按钮放到插件对象ul的后面

5、返回分页按钮中的li对象,后面有用的

七、切换图片

/**
  * @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-index加大,下一张图片的z-index也加大,显示下一张图,这样能做出一种渐变的效果,不加的话就会是很生硬的切换

2、选择按钮的下一个增加选中样式

3、应用jQuery的fadeOut与fadeIn做隐藏与显示的渐变特效

八、自动循环

/**
  * @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、如果不是暂停,就根据条件做当前页与下一个按钮的序号设置

插件还有很多问题,比如不能在一个页面绑定两个不同的对象,还有巨大的修改空间。

通过这次的修改,自己有了一个可以控制的焦点图切换插件,虽然还有很多问题但可以一步一步解决。以后嵌入到自己的项目中,修改起来也方便很多。

demo:http://demo.3water.com/js/2014/jsilde/

下载: https://3water.com/jiaoben/210405.html

Javascript 相关文章推荐
Google 静态地图API实现代码
Nov 19 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
js选项卡的制作方法
Jan 23 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 #Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 #Javascript
JavaScript实现的in_array函数
Aug 27 #Javascript
JavaScript AJAX之惰性载入函数
Aug 27 #Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 #Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 #Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 #Javascript
You might like
php 文章采集正则代码
2009/12/28 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
Python 加密与解密小结
2018/12/06 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
迷你西餐厅创业计划书范文
2013/12/31 职场文书
个人收入证明范本
2014/01/12 职场文书
一年级数学教学反思
2014/02/01 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
医德医魂心得体会
2014/09/11 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
本溪关门山导游词
2015/02/09 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书