一、要结合布局才能形成百叶窗的效果
二、开启两个定时器，第一个定时器控制的是百叶窗整体一次上翻，一次下翻；另一个控制百叶窗中的各页逐次翻转，形成层次效果。否则就成了普通的滚动广告的效果了
本实现借助于自己实现的base.js和tool.js 。重点是利用了其中的animate函数
1.页面布局代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>测试页面</title>
<style>
*{margin:; padding:; }
ul{width:300px;}
ul>li{list-style: none;height:30px; overflow: hidden;border-bottom: 1px dashed #;}
li>div{margin:; padding:;position:relative;top:;}
ul p{height:30px;line-height: 30px;} </style>
</head> <body>
<ul >
<li>
<div>
<p></p>
<p></p>
</div>
</li>
<li>
<div>
<p></p>
<p></p>
</div>
</li>
<li>
<div>
<p></p>
<p></p>
</div>
</li>
<li>
<div>
<p></p>
<p></p>
</div>
</li>
<li>
<div>
<p></p>
<p></p>
</div>
</li>
</ul>
<script src="./commonJs/tool.js"></script>
<script src="./commonJs/base.js"></script>
<script src="./usualEffects/js/baiyechuang.js"></script> </body> </html>
百叶窗html布局
2.相关js代码
/*
* 尝试实现百叶窗效果
*/
//需要两个定时器
$(function() {
var oUl = document.getElementsByTagName('ul')[];
showBaiye(oUl); function showBaiye(oUl) {
var divs = oUl.getElementsByTagName('div');
var flag = true;
var iNow = ;
var timer;
//每4s百叶窗整体翻动一次，一次上翻，一次下凡
setInterval(function() { //如果不开定时器的话,就没有层次的效果了,就是普通轮播图的效果
// for (var i = 0; i < divs.length; i++) {
// $(divs[i]).animate({ 'top': '-30px' }, null, 100);
// };
//每隔300ms每一个百叶逐个翻动，形成层次效果
timer = setInterval(changeItem, );
flag=!flag;
}, ); function changeItem() {
var endValue = flag ? '-30px' : '';
$(divs[iNow]).animate({ 'top': endValue }, null, );
iNow++;
if (iNow == divs.length) {
iNow = ;
clearInterval(timer); }
}
} });