JavaScript打造无缝切换

 

原文摘自我的前端博客,欢迎大家来访问

http://hacke2.github.io/

起因

一年前写管理学院的时候,那时候做首页有一个幻灯片,由于之前没交流好,CL写的静态页面幻灯片图片是在背景里,让我用jq写, 当时就感觉特别啃爹,图片写在了css里。。好坑爹,自己又懒得改,只能硬着头皮用jq写,一堆临时变量,如num++,各种奇葩,最后加了 个jq淡隐淡出的效果,就交差了,,代码如下:

 
function trim(s) {
return s.replace(/^\s*/, "").replace(/\s*$/, "");
}
 
/**
* 限制字数,第一个传要限制的className,第二个传限制的字数
* @author: wxl
**/
function limitTextNum(className, num) {
var limitNum = num;
$("."+className+"").each(function () {
var curText = $(this).text();
var curLength = $(this).text().length;
if (curLength > num) {
curText = $(this).text(curText.substring(0, limitNum) + ‘...‘);
}
});
}
 
/**
* 菜单折叠
* @author: wxl
**/
function initMenu() {
$(".listArea").hide();
$(‘.listArea:first‘).show();
$(‘#dynamic_list .list_title‘).click(
function () {
var checkElement = $(this).next();
if ((checkElement.is(‘div‘)) && (checkElement.is(‘:visible‘))) {
return false;
}
if ((checkElement.is(‘div‘)) && (!checkElement.is(‘:visible‘))) {
$(this).children("div").children("a").css("background", "url(/Content/Images/Home/ico.PNG) no-repeat left center");
$(‘.listArea:visible‘).prev("div").children("div").children("a").css("background", "url(/Content/Images/Home/ico2.PNG) no-repeat left center");
$(‘.listArea:visible‘).slideUp(‘fast‘);
checkElement.slideDown(‘fast‘);
return false;
}
}
);
}
 
/**
*图片翻滚
*@author wxl
**/
function rollPictures() {
var t = 0, count;
var rollPics = $("#pictureArea div").slice(0, index.rollNewsPicsLength);
count = rollPics.length - 1;
rollPics.not(‘:first‘).hide();
$("#pageStyle .pageUp").click(function () {
t--;
if (t < 0) t = count;
if (t == count) {
$("#pictureArea div").eq(0).hide();
$("#pictureArea div").eq(t).fadeIn("slow");
}
else {
$("#pictureArea div").eq(t + 1).hide();
$("#pictureArea div").eq(t).fadeIn("slow");
}
 
})
$("#pageStyle .pageDown").click(function () {
t++;
if (t > count) t = 0;
$("#pictureArea div").eq(t).fadeIn("slow");
if (t == 0) {
$("#pictureArea div").eq(count).hide();
} else {
$("#pictureArea div").eq(t - 1).hide();
}
 
})
//设一个定时器,每三秒翻滚图片
setInterval(function () {
$("#pageStyle .pageDown").click();
}, 5000)
}
view rawcommon.js hosted with ? by GitHub

这几天一个前端qq群主分享了一个东西说平时可以练练手,我没有做,可是看到他说,群里面有些人小东西不屑做,稍微大点有不会做 我当时就感觉说我。。刚才写了一下,与大家分享

思路

关键一点就是克隆,而且是深克隆,obj.clone(true);这样就能克服该节点的所有子节点。之所以选择克隆,是因为直接删除太突兀了。

一般无缝切换的幻灯片是这样做的

1.点击前一个:将最开始的节点克隆到最后一个节点后面,然后整体向前移,并且删除掉第一个元素

2.点击后一个:将最后节点克隆到最前面的节点钱,然后整体向后移,并且删除掉最后一个元素

动画效果用的智能社的动画脚本

代码

代码在github上,有兴趣的看下:

JavaScript打造无缝切换

查看完整DEMO

end

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。