原文摘自我的前端博客，欢迎大家来访问
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上，有兴趣的看下：
查看完整DEMO
end
时间： 2024-10-16 10:34:39