[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构
写在前面
前面写过一篇文章《[JQuery]用InsertAfter实现图片走马灯展示效果》，自从写过那样的也算是使用面向对象的写法吧，代码实在丑陋，自从写过那样的代码，就是自己的一块心病，总感觉不完美，心里一直惦记着那件事，也是在我写过那篇文章之后，没多久，在博客园首页看到了一篇文章较复杂js的书写格式，这里的代码看着比较简介，就想着抽时间将之前的那段js代码进行重构。说做就做，不想一想起之前写过那样的代码，心里就有疙瘩。所以也就有了这篇文章。
$.extend
在开始重构之前，需要先学习一下$.extend()方法，之前虽然见过它，但并不了解它，为了加深彼此的了解，所以先对它进行初步的学习，并在以后的项目中，经常的去使用它，达到彼此熟悉。
extend的意思就是扩展，$.extend()就是jquery的扩展方法。
$.extend()方法原型
$.extend(dest,src1,src2,src3....);
含义：将src1,src2,src3...合并到dest中,返回值为合并后的des,由此可以看出该方法合并后，是修改了des的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：
var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。
这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了。如下例：
<script src="Script/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
var result = $.extend({},{ name: "Tom", age: 21 },{ name: "Jerry", sex: "Boy" });
alert("name:" + result.name + " age:" + result.age + " sex:" + result.sex);
</script>
结果：
也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值，如果为后面的对象添加一个age属性并设置为11，则结果如下：
<script type="text/javascript">
var result = $.extend({}, { name: "Tom", age: 21 }, { name: "Jerry",age:11, sex: "Boy" });
alert("name:" + result.name + " age:" + result.age + " sex:" + result.sex);
</script>
结果
省略dest参数
上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去，如：
<script type="text/javascript">
$.extend({ hello: function () { alert('hello'); } });
$.hello();
</script>
结果
就是将hello方法合并到jquery的全局对象中。
$.fn.extend(src)
该方法将src合并到jquery的实例对象中去，如:
单击按钮，调用扩展方法hello。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Script/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$.fn.extend({ hello: function () { alert('hello'); } });
$(function () {
//jquery实例对象$("#btn")
$("#btn").hello();
});
</script>
</head>
<body>
<input type="button" name="name" value="按钮" id="btn" />
</body>
</html>
结果
页面加载，调用按钮jquery对象实例的hello方法。
几个例子
<script type="text/javascript">
//这是在jquery全局对象中扩展一个net命名空间。
$.extend({ net: {} });
//这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。
$.extend($.net, {
hello: function () {
alert("net.hello");
}
});
//调用net下的hello
$.net.hello();
结果为弹出“net.hello”
jquery.extend()另外一个原型
$.extend(boolean,dest,src1,src2,src3...)
第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：
<script type="text/javascript">
var result = $.extend(true, {},
{
name: "John",
location:
{ city: "Boston", county: "USA" }
}, {
last: "Resig",
location:
{ state: "MA", county: "China" }
});
</script>
我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true，那么合并后的结果就是：
<script type="text/javascript">
var result = $.extend(true, {},
{
name: "John",
location:
{ city: "Boston", county: "USA" }
}, {
last: "Resig",
location:
{ state: "MA", county: "China" }
});
alert("name:" + result.name
+ "\r\nlast:" + result.last
+ "\r\nlocation.state:" + result.location.state
+ "\r\nlocation.county:" + result.location.county
+ "\r\nlocation.city:" + result.location.city)
</script>
结果
也就是说它会将src中的嵌套子对象也进行合并，而如果第一个参数boolean为false，我们看看合并的结果是什么，如下：
var result = $.extend(false, {},
{
name: "John",
location:
{ city: "Boston", county: "USA" }
}, {
last: "Resig",
location:
{ state: "MA", county: "China" }
});
参考文章：http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html
重构代码
学习了上面的extend方法，那么下面就对上篇文章中的图片走马展示的js进行重写。
代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="Css/Style.css" rel="stylesheet" />
<script src="Script/jquery-1.10.2.js"></script> <script type="text/javascript">
var Tearchers = [{
"id": "1",
"T1": "萌萌雨1",
"T2": "上海复旦大学硕士学位1",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师1",
"imgsrc": "imges/teach_1.png"
},
{
"id": "2",
"T1": "萌萌雨2",
"T2": "上海复旦大学硕士学位2",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师2",
"imgsrc": "imges/teach_2.png" },
{
"id": "3",
"T1": "萌萌雨3",
"T2": "上海复旦大学硕士学位3",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师3",
"imgsrc": "imges/teach_3.png"
}, {
"id": "4",
"T1": "萌萌雨4",
"T2": "上海复旦大学硕士学位4",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师4",
"imgsrc": "imges/teach_4.png"
}, {
"id": "5",
"T1": "萌萌雨5",
"T2": "上海复旦大学硕士学位5",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师5",
"imgsrc": "imges/teach_5.png"
}
, {
"id": "6",
"T1": "萌萌雨6",
"T2": "上海复旦大学硕士学位6",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师6",
"imgsrc": "imges/teach_6.png" }, {
"id": "7",
"T1": "萌萌雨7",
"T2": "上海复旦大学硕士学位7",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师7",
"imgsrc": "imges/teach_7.png" }, {
"id": "8",
"T1": "萌萌雨8",
"T2": "上海复旦大学硕士学位8",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师8",
"imgsrc": "imges/teach_8.png" }, {
"id": "9",
"T1": "萌萌雨9",
"T2": "上海复旦大学硕士学位9",
"T3": "追求完美与一身的现代化教师女性，才华横溢一表人才,优秀教师9",
"imgsrc": "imges/teach_9.png" },
]; //滚动图片对象
var srcollImages = {
//timer句柄
timerHandle: null, //初始化操作
init: function (options) {
var newoptions = this.setOptions(options);
//设置高亮li
this.getHightLightLi(newoptions);
//开启定时器
this.timerStart(newoptions);
//鼠标悬停操作
this.hoverElement(newoptions);
//单击操作处理
this.clickElement(newoptions);
},
//设置参数
setOptions: function (options) {
var defaultoptions = {
interval: 1000,//定时器时间间隔
//容器
"scrollContainer": null,
}
//扩展默认配置进行扩展
return $.extend({}, defaultoptions, options || {})
},
//开启定时器
timerStart: function (options) {
var self = this;
self.timerHandle = setInterval(function myfunction() {
self.firstInsertAfterLast();
var $hightli = self.getHightLightLi(options.scrollContainer);
$hightli.removeClass("Zzhao_cent").addClass("Zzhao").next().removeClass("Zzhao").addClass("Zzhao_cent");
},options.interval)
},
//停止定时器
timerStop: function (options) {
clearInterval(this.timerHandle);
},
hoverElement: function (options) {
//得到当前对象
var self = this;
$("ul li").hover(function () {
self.timerStop(options);
}, function () {
self.timerStart(options);
})
},
clickElement: function (options) {
$("ul li").each(function () {
$(this).click(function () {
var selfclik = $(this);
//停止定时器
clearInterval(self.timerHandle);
//只对普通的照片进行处理，高亮居中的照片不再处理
if ($(this).hasClass("Zzhao")) {
//index()方法用来获取jquery对象的位置索引
var currentIndex = $(this).index();
//高亮图片的索引位置，以中间高亮图片为原点
var hightIndex = $(".Zzhao_cent").index();
//currentIndex > hightIndex说明单击的图片在高亮图片右边
if (currentIndex > hightIndex) {
//移动的步数
var step = currentIndex - hightIndex;
$(this).removeClass("Zzhao").addClass("Zzhao_cent");
$(this).siblings().removeClass("Zzhao").removeClass("Zzhao_cent").addClass("Zzhao");
//移动多少次
for (var i = 0; i < step; i++) {
srcollImages.firstInsertAfterLast();
}
} else {
//中间高亮图片之前的单击处理
//移动的步数
var step = currentIndex + hightIndex + 1;
$(this).removeClass("Zzhao").addClass("Zzhao_cent");
$(this).siblings().removeClass("Zzhao").removeClass("Zzhao_cent").addClass("Zzhao");
//移动多少次
for (var i = 0; i < step; i++) {
srcollImages.firstInsertAfterLast();
}
}
for (var i = 0; i < Tearchers.length; i++) {
var teacher = Tearchers[i];
if (teacher) {
if (selfclik.find("img").attr("src") == teacher.imgsrc) {
$(".T1").html(teacher.T1);
$(".T2").html(teacher.T2);
$(".T3").html(teacher.T3);
}
}
}
}
});
});
},
//将第一个li插在最后一个ul之后
firstInsertAfterLast: function () {
$("ul li:first").insertAfter($("ul li:last"));
},
/*
获得高亮显示的li
$containerObject：ul容器jquery对象
$result：高亮显示的li
*/
getHightLightLi: function (options) {
var $lis = $("ul li", options.scrollContainer);
var $result = null;
$lis.each(function (index, element) {
if ($(this).attr("class") == "Zzhao_cent") {
$result = $(element);
$.each(Tearchers, function (index) {
//当前对象
var teacher = this;
if ($result.find("img").attr("src") == teacher.imgsrc) {
index = index + 1;
//对最后一张图片的处理
if (index >= (Tearchers.length - 1)) {
teacher = Tearchers[0];
} else {
teacher = Tearchers[index];
}
$(".T1").html(teacher.T1);
$(".T2").html(teacher.T2);
$(".T3").html(teacher.T3);
}
})
}
});
return $result;
}
};
$(function () {
//初始化滚动对象
srcollImages.init({ "scrollContainer": $(".Teac") ,interval: 2000 });
}); </script>
</head> <body>
<div class="teacher">
<div class="Teac">
<ul>
<li class="Zzhao">
<a href="#"><img src="imges/teach_1.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_2.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_3.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_4.png" /></a>
</li>
<li class="Zzhao_cent">
<a href="#"><img src="imges/teach_5.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_6.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_7.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_8.png" /></a>
</li>
<li class="Zzhao">
<a href="#"><img src="imges/teach_9.png" /></a>
</li>
</ul>
<div class="Jjie">
<span class="T1">萌萌雨5</span>
<span class="T2">上海复旦大学硕士学位5</span></br>
<p class="T3">
追求完美与一身的现代化教师女性，才华横溢
一表人才，优秀教师5
</p>
</div>
</div>
</div>
</body>
</html>
Index.html
总结
每天逛博客园已经是一种习惯，的确收获不少，看到了然后就动手实践，也就有了这篇js重构的文章，虽然看起来仍有点乱，但是通过这次重构，让我对jquery的扩展方法的用法有了一个深入的学习。但如果将这个功能插件化，还得进一步深入学习，然后再次重构，通过这次重构，收获还是有的，我会在以后的项目中更多的采用面向对象的方式去写js或者jquery，也会将extend方法使用起来。
[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构的更多相关文章
- [JQuery]用InsertAfter实现图片走马灯展示效果
写在前面 最近一个搞美工的朋友让我给他写一个图片轮播的特效. 需求: 图片向左循环滚动. 图片滚动到中间高亮显示,并在下方显示照片人物对应的信息. 鼠标悬停止滚动. 鼠标离开开始滚动. 单击图片,图片 ...
- 3-5 编程练习：jQuery实现简单的图片对应展示效果
3-5 编程练习:jQuery实现简单的图片对应展示效果 通过这个章节的学习, 老师带领大家完成了一个基本的图片切换特效,接下来,我们也实现一个类似的效果,点击相应的按钮,切换对应的图片. 效果图 : ...
- IE6-能让png图片有透明效果的js代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 【三石jQuery视频教程】01.图片循环展示
视频地址:http://v.qq.com/page/e/5/t/e0149n5he5t.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...
- 【三石jQuery视频教程】01.图片循环展示_再次重发
之前的文章,由于在博文的底部放有微信公众号的缘故,被管理员判定为: 您好,您的这篇博文内容本身没什么问题,但是,在博文底部存在推广信息内容.... 你们也没告知到底是哪条触犯了博客园的规矩,我就把底部 ...
- Elastislide - 响应式的图片循环展示效果
Elastislide 是一款非常优秀的响应式 jQuery 图片循环展示(旋转木马)插件,集成了 Touchwipe 插件以支持触屏设备.提供了四种效果:水平图片传送带.垂直图片传送带.固定在屏幕底 ...
- 基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- 基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
- 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
随机推荐
- hdu 6223 Infinite Fraction Path
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=6223 题意:给定长度为n的一串数字S,现在要按照一种规则寻找长度为n的数字串,使得该数字串的字典序最大 ...
- EL遍历集合
jstl EL表达式遍历集合 博客分类: JSTL/EL JSTLEL遍历集合 在EL中,方括号运算符用来检索数组和集合的元素.对于实现 java.util.Map 接口的集合,方括号运算符使用关联 ...
- centos python2.6升级到2.7出现的问题
centos自带的python版本为2.6,在使用tornado时会出现如下报错: NameError: global name 'memoryview' is not defined 因此需要升级到 ...
- Linux下的两个经典宏定义【转】
转自:http://www.linuxidc.com/Linux/2015-07/120014.htm 本文首先介绍Linux下的经典宏定义,感受极客的智慧,然后根据该经典定义为下篇文章作铺垫. of ...
- SQL按多个字段排序时的实现规则
1.在使用SQL中的ORDER BY按照表中的多个列对表做排序是,会按照第一个列的排序条件作为排序基准,当第一个列的值都相同时,才会按照后面的列的排序条件作为排序基准: 案例如下: 图一和图二展示的是 ...
- ECharts问题--散点图中对散点添加点击事件
1. 我们这次就没有先讲解怎么使用散点图了,这个跟之前的一些图还是很类似的,不会的可以去官网上面查看 API 使用.我们这次讲解的是为散点图中的散点添加点击事件,然后在图表之外的一个 div 里面显示 ...
- ttk.Treeview
TTK的目的. TreeView控件的呈现层次结构,用户可以使用鼠标动作来显示或隐藏结构的任何部分. 与术语“树”的关联是由于编程实践:树结构是一个常见的程序设计.严格地说,在一个TreeView控件 ...
- docker从零开始网络（二）桥接网络
使用桥接网络 在网络方面,桥接网络是链路层设备,它在网络段之间转发流量.桥接网络可以是硬件设备或在主机内核中运行的软件设备. 就Docker而言,桥接网络使用软件桥接器,该软件桥接器允许连接到同一桥接 ...
- 《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器
<锋利的jQuery>源码下载,包括了这本书中全部代码以及用到的CSS文件 第一章 认识jQuery jQuery是个Js库.首先该明确的一点是:在jQuery库中$就是jQuery的一个 ...
- 实现用http上传文件，用ftp下载文件
1.ftp配置 1.检查安装vsftpd软件 使用如下命令#rpm -qa |grep vsftpd可以检测出是否安装了vsftpd软件, 如果没有安装,使用YUM命令进行安装. 2.启动服务 使用v ...