jQuery自定义插件--banner图滚动
| 前言 |
jQuery是一个功能强大的库，提供了开发JavaScript项目所需的所有核心函数。很多时候我们使用jQuery的原因就是因为其使用插件的功能，然而，有时候我们还是需要使用自定义代码来扩展这些核心函数来提高开发效率。我们知道， jQuery库是为了加快JavaScript的开发速度而设计的，通过简化编写JavaScript的方式，减少代码量。所以，今天就带大家了解一下jQuery自定义插件以及自定义插件案例---banner图滚动。
| 一、自定义插件 |
自定义插件一般有两种类型：全局插件和局部插件；接下来，先了解一下这两种插件；
1、全局插件声明——为扩展jQuery类本身.为类添加新的方法。
$.extend({
func:function(){} // func -->插件名
})；
全局插件调用：
$.func();
定义一个全局变量，其实就是在$.extend中定义对象里面的方法进行编译自己想要得到的功能插件，并留出想要的变量接口；
举个小例子：
JS:
<script type="text/javascript">
$.extend({
sayHello : function(){
alert("hello!!");
},
say : function(message){
alert("你说了："+message);
}
});
$.sayHello();
$.say("hhahaha");
</script>
2、局部插件声明
$.fn.func = function(){}
局部插件调用
$("选择器").func();
举个小例子：
JS：
<script type="text/javascript">
$.fn.setBgColor = function(bgColor){ bgColor = bgColor?bgColor:"#ccc"; //设置默认值
this.css("background-color",bgColor);
}
$("#div1").setBgColor("red"); $.fn.setFont = function(obj){ var defaults = {
"font-size" : "35px",
"font-weight" : "normal",
"font-family" : "宋体",
"color" : "#ccc"
}
//将默认值与传入的obj比对。并返回一个新对象。
//如果obj里面有的属性，则使用obj属性。
//如果obj没有声明的属性则使用默认值里面的属性
var newObj = $.extend(defaults, obj); this.css(newObj); //将调用当前函数的对象(this)返回，可以保证JQuery的链式语法
return this;
};3 $("#div1").setFont({
"font-size" : "20px",
"font-weight" : "bold",
"font-family" : "微软雅黑",
"color" : "blue"
}); </script>
结果：
提醒：在上述的小例子中，在$.fn声明的插件函数中，可以使用this代指调用这个插件的的对象节点。
而且，尤其要记住，this是一个JQuery对象，需要操作jQuery，千万不要用原生JS的DOM；
在上述的例子中，通过设置默认值来设置接口。通过调用插件，将所需设置的css样式设置在函数的odj中，并返回一个新对象从而实现功能；
| 二、自定义插件-banner图滚动 |
该插件实现banner滚动
一、插件的属性：
images:接受数组类型，数组的每个值应为对象。对象具有属性:src->图片的路径
title->图片指上后的文字 href->图片指上后的跳转页面
scrollTime:滚动时间，单位毫秒 5000
bannerHeight：Banner图的高度
iconColor：图片导航的颜色。默认white
iconHoverColor：图片导航指上后的颜色。默认 orange
iconPosition：图片导航的位置。可选left/right/center. 默认为center
1、小图标指上以后变色并且切换banner图
通过：由span触发mouseover事件，则this指向这个span。
但是，这this是JS对象，必须使用$封装成JQuery对象
$(".scrollBanner-icon").mouseover(function(){
$(".scrollBanner-icon").css("background-color",obj.iconColor);
// 。
$(this).css("background-color",obj.iconHoverColor);
var index = $(this).attr("data-index");
//将计数器count修改为index的值，让banner图滚动的定时器能够刚好滚到所指图片的下一张
count = index;
$(".scrollBanner-banner").css({
"transition": "none",
"margin-left":"-"+index+"00%"
});
});
效果：
3.2.1插件总代码
自定义banner图效果
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义插件实现banner图滚动</title>
<script src="JS/jquery-3.1.1.js" type="text/javascript"></script>
<script src="JS/jquery-acrollBanner.js"type="text/javascript"></script> </head>
<body>
<div id="banner"></div> <script type="text/javascript">
$("#banner").scrollBanner({
images :[
{src:"插件/img/banner01.png",title:"banner1",href:"http://www.baidu.com"},
{src:"插件/img/banner02.png",title:"banner2",href:"http://www.sina.com"},
{src:"插件/img/banner03.png",title:"banner3",href:"http://www.baidu.com"},
{src:"插件/img/banner04.png",title:"banner4",href:"http://www.baidu.com"},
]
});
</script>
</body>
</html>
插件源码
!function($){
$.fn.scrollBanner = function(obj){
// 声明各个属性的默认值,也就是设置插件可接收的接口
var defaults = {
images : [],
scrollTime : 2000,
bannerHeight : "500px",
iconColor : "white",
iconHoverColor : "orange",
iconPosition : "center"
}
// 将默认值与传入的对象比对，如果传入的对象有未赋值属性，则使用默认对象的属性
obj = $.extend(defaults,obj);
console.log(obj);
// 组件DOM布局
$("body").css({"padding":"0px","margin" : "0px"});
this.empty().append("<div class='scrollBanner-banner'></div>");
$.each(obj.images,function(index,item){
$(".scrollBanner-banner").append("<div class='scrollBanner-bannerInner'><a href='"+item.href+"' target='_black'><img src='"+item.src+"' title='"+item.title+"' /></a></div>");
});
$(".scrollBanner-banner").append("<div class='scrollBanner-bannerInner'><a href='"+obj.images[0].href+"' target='_black'><img src='"+obj.images[0].src+"' title='"+obj.images[0].title+"' /></a></div>");
this.append("<div class='scrollBanner-icons'></div>");
$.each(obj.images, function(index,item) {
//data-*属性是H5允许用户自行在HTML标签上保存数据的属性。
//保存在data-*中的数据，可以使用js读取调用
$(".scrollBanner-icons").append("<span class='scrollBanner-icon' data-index ='"+index+"'></span>");
});
//设置css
this.css({
"width":"100%",
"height":obj.bannerHeight,
"overflow":"hidden",
"position":"relative"
});
$(".scrollBanner-banner").css({
"width":obj.images.length+1+"00%",
"height":obj.bannerHeight,
"transition": "all .5s ease"
});
$(".scrollBanner-bannerInner").css({
"width" : 100/(obj.images.length+1)+"%",
"height":obj.bannerHeight,
"overflow":"hidden",
"float":"left"
});
$(".scrollBanner-bannerInner img").css({
"width": "1920px",
"height":obj.bannerHeight,
"position": "relative",
"left": "50%",
"margin-left": "-960px"
});
$(".scrollBanner-icons").css({
"position":"absolute",
"z-index":"100",
"width" :30*obj.images.length+"px",
"bottom":"40px",
"height":"7px"
})
switch (obj.iconPosition){
case "left":
$(".scrollBanner-icons").css({
"left":"40px",
});
break;
case "right":
$(".scrollBanner-icons").css({
"right":"40px",
});
break;
case "center":
$(".scrollBanner-icons").css({
"left":"50%",
"margin-left":"-"+15*obj.images.length+"px"
});
break;
default:
break;
}
$(".scrollBanner-icon").css({
"width": "15px",
"height": "5px",
"background-color": obj.iconColor,
"display": "inline-block",
"margin": "0px 5px"
})
//小图标指上以后变色并且切换banner图
$(".scrollBanner-icon").mouseover(function(){
$(".scrollBanner-icon").css("background-color",obj.iconColor);
// ↓ 由span触发mouseover事件，则this指向这个span。
// ↓ 但是，这this是JS对象，必须使用$封装成JQuery对象。
$(this).css("background-color",obj.iconHoverColor);
var index = $(this).attr("data-index");
//将计数器count修改为index的值，让banner图滚动的定时器能够刚好滚到所指图片的下一张
count = index;
$(".scrollBanner-banner").css({
"transition": "none",
"margin-left":"-"+index+"00%"
});
});
//实现banner滚动
var count = 0 ;
$(".scrollBanner-icon:eq("+0+")").css("background-color",obj.iconHoverColor);
setInterval(function(){
count++;
$(".scrollBanner-banner").css({
"margin-left":"-"+count+"00%",
"transition": "all .5s ease"
})
$(".scrollBanner-icon").css("background-color",obj.iconColor);
$(".scrollBanner-icon:eq("+count+")").css("background-color",obj.iconHoverColor);
if (count>=obj.images.length) {
$(".scrollBanner-icon:eq("+0+")").css("background-color",obj.iconHoverColor);
}
if(count>obj.images.length){
count=0;
$(".scrollBanner-banner").css({
"margin-left":"0px",
"transition":"none"
})
}
},obj.scrollTime);
}
}(jQuery);
jQuery自定义插件--banner图滚动的更多相关文章
- JQuery自定义插件详解之Banner图滚动插件
前 言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...
- JQuery实现banner图滚动
前 言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是 ...
- 你的专属定制——JQuery自定义插件
前 言 絮叨絮叨 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗 ...
- 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
- fullpage的使用以及less, Sass的属性和JQuery自定义插件的声明和使用
使用fullpage的步骤 1 导入JQuery.js fullpage,js fullpage.css 2 组建网页布局,最外层id="fullpage" 单页class=& ...
- 深入学习jQuery自定义插件
原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数); $(‘#id’).myPlugin(o ...
- jquery自定义插件——以 选项卡插件为例
一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...
- jQuery自定义插件
jQuery自定义插件 jQuery自定义插件按照功能分类,可以分为三类, 1>封装对象方法的插件,(也就是基于某个DOM元素的jQuery对象,局部的) 2>封装全局函数的插件, ( ...
- 代码：jquery自定义插件 demo
jquery自定义插件 demo 2016-1-13 只是一个简易的示例 <script type="text/javascript" src="http://cd ...
随机推荐
- windows转储文件(dmp)
1. 何为转储文件 转储文件也就是我们常说的dump文件.可以把转储文件看成软件的某个时刻的一个快照.转储文件一般都是在软件出现问题时手动生成或者程序自动生成.下面我们介绍几种生成转储文件的 ...
- SpringMVC（一）--基础、REST、@RequestParam、POST请求乱码等
1.SpringMVC基本概述 Spring 为展现层提供的基于 MVC 设计理念的优秀的Web 框架,是目前最主流的 MVC 框架之一 Spring3.0 后全面超越 Struts2,成为最优秀的 ...
- Android SQLite 简易指北
Android SQLite SQLite一款开源的, 轻量级的数据库. 以文本文件的形式存储数据. SQLite支持所有标准的关系型数据库特性. SQLite运行时占用内存非常少(约250 KByt ...
- quartus2中FPGA管脚分配保存方法（转）
一.摘要 将Quartus II中FPGA管脚的分配及保存方法做一个汇总. 二.管脚分配方法 FPGA 的管脚分配,除了在QII软件中,选择“Assignments ->Pin”标签(或者点击按 ...
- Spring同mybatis整合讲义(事物)
1.mybatis的作用. 它是一个数据持久化的解决方案,它是一个ORM的框架. 2.Spring的作用? 备注:将本地jar包拷贝至本地的maven仓库里:oracle的jar包需自己发布到mave ...
- 如何使用 Weave 网络？- 每天5分钟玩转 Docker 容器技术（63）
weave 是 Weaveworks 开发的容器网络解决方案.weave 创建的虚拟网络可以将部署在多个主机上的容器连接起来.对容器来说,weave 就像一个巨大的以太网交换机,所有容器都被接入这个交 ...
- Mybatis --- 映射文件、参数处理、参数值的获取、select元素
映射文件:指导着MyBatis如何进行数据库增删改查, 有着非常重要的意义: - cache 命名空间的二级缓存配置 - cache-ref 其他命名空间缓存配置的引用. - result ...
- 官方问答--微信小程序常见FAQ (17.8.21-17.8.27)
给提问的开发者的建议:提问之前先查询 文档.通过社区右上角搜索搜索已经存在的问题. 写一个简明扼要的标题,并且正文描述清楚你的问题. 提交 BUG:需要带上基础库版本号,设备信息(iOS, Andro ...
- 【Linux部署 · GIT】在linux系统安装git和配置实现SSH
领导给了一个不开放ftp的测试库,让我部署项目.拿到一个全新的环境,真是个练手的好机会. 该操作系统为:CentOs release 6.5(Final) 由于不开放ftp,所以上传下载代码是非常麻烦 ...
- PKIX path building failed
百度这个问题,很多人都说是证书问题.至于是什么证书呢?搞了老半天原来是 /Java/jre/lib/security/cacerts不正确.换了个jdk版本就解决这个问题了. 可靠的jdk1.8下载链 ...