原文摘自我的前端博客，欢迎大家来访问
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
)
}
|
这几天一个前端qq群主分享了一个东西说平时可以练练手，我没有做，可是看到他说，群里面有些人小东西不屑做，稍微大点有不会做 我当时就感觉说我。。刚才写了一下，与大家分享
思路
关键一点就是克隆,而且是深克隆，obj.clone(true);这样就能克服该节点的所有子节点。之所以选择克隆，是因为直接删除太突兀了。
一般无缝切换的幻灯片是这样做的
1.点击前一个：将最开始的节点克隆到最后一个节点后面，然后整体向前移，并且删除掉第一个元素
2.点击后一个：将最后节点克隆到最前面的节点钱，然后整体向后移，并且删除掉最后一个元素
动画效果用的智能社的动画脚本
代码
代码在github上，有兴趣的看下：
查看完整DEMO
end