[JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构
2014-10-26 19:33
1091 查看
写在前面
前面写过一篇文章《[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>结果：
<!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实现图片走马灯展示效果
- JS实现3D图片旋转展示效果代码
- 使用JS实现图片展示瀑布流效果的实例代码
- jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
- JS实现3D图片旋转展示效果代码
- js框架jquery瀑布流图片墙效果代码下载,点击相册图片展示大图
- JS特效代码大全（九）超炫的js图片展示效果（一）
- 最简单的js图片切换效果实现代码
- jquery实现上传图片及图片大小验证、图片预览效果代码(借荐，谢谢原作者)
- jquery实现上传图片及图片大小验证、图片预览效果代码
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
- 图片的左右移动，js动画效果实现代码
- 走马灯效果代码js appendChild实现的无缝滚动
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
- jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox
- Jquery 焦点图 用于图片展示效果代码
- JS(jquery)实现图片放大镜效果
- JS 非图片动态loading效果实现代码