- jQuery百叶窗翻牌效果代码，其实也就是文字切换，采用了百叶窗的方式，在原理上，每隔三秒执行一次变换LI的内容，LI变换的方式，即每隔100ms，让下一个LI移动top值;所有的LI移动完毕，就清除，依次类推，实现循环切换，形似百叶窗。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery百叶窗翻牌效果代码</title>
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
var timer = true; //执行向上或向下的开关
var liindex = 0;//LI的索引
var $div = $(".byc").find("div");
//每隔三秒执行一次变换LI的内容
var set1 = setInterval(function(){
ainbyc($div);
liindex = 0;
timer = !timer;
},3000);
//LI变换的方式，即每隔100ms，让下一个LI移动top值;
function ainbyc(ds){
var set2 = setInterval(function(){
//所有的LI移动完毕，就清除
if(liindex == $div.length){
clearInterval(set2);
//向上
}else if(timer){
ds.eq(liindex).animate({"top":0},100);
//向下
}else{
ds.eq(liindex).animate({"top":-25},100);
}
liindex++;
},100);
}
})
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width:500px;
margin:0 auto;
}
ul.byc{
list-style:none;
}
ul.byc li{
position:relative;
width:180px;
height:30px;
overflow:hidden;
border-bottom:1px #000000 dotted;
}
ul.byc li div{
position:absolute;
top:-25px;
}
ul.byc li div p{
height:30px;}
</style>
</head>
<body>
<div class="box">
<ul class="byc">
<li>
<div>
<p>aaaaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbbbb</p>
</div>
</li>
<li>
<div>
<p>cccccccccccccc</p>
<p>dddddddddddddd</p>
</div>
</li>
<li>
<div>
<p>eeeeeeeeeeeeee</p>
<p>ffffffffffffff</p>
</div>
</li>
<li>
<div>
<p>ggggggggggggg</p>
<p>hhhhhhhhhhhhh</p>
</div>
</li>
<li>
<div>
<p>jjjjjjjjjjjjj</p>
<p>kkkkkkkkkkkkk</p>
</div>
</li>
<li>
<div>
<p>llllllllllll</p>
<p>mmmmmmmmmmmm</p>
</div>
</li>
</ul>
</div>
</body>
</html> 