1、根据数据结构生成HTML结构（利用dom操作）。
2、获取每一个li,给每一个li中每一个a标签绑定事件处理函数。
3、点击a标签，把a标签的内容添加在对象中，同时添加样式。
4、根据对象存的属性生成选择则条件的HTML结构（按顺序排列）。
5、点击关闭选择的条件，删除数据，移除HTML结构，去除在其对应的li中的样式。
这个使用js包 比如jquery等 淘宝用的是kissy 下面是operamasks实现这个效果的完整代码
<style>.slider-demo{
width: 500px
height: 375px
padding: 0
}
body p{
font-weight: bold
font-size: 13px
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#slider-slide-v').omSlider({effect:'slide-v'})
})
</script>
<div id="effect_tab">
<ul>
<li><a href="#slider-slide-h">水平滑动效果</a></li>
</ul>
<div id="slider-slide-v" class="slider-demo">
<img src="images/turtle.jpg" />
<a href="#"><img src="images/rabbit.jpg" /></a>
<img src="images/penguin.jpg" />
<img src="images/lizard.jpg" />
<img src="images/crocodile.jpg" />
</div>
</div>
主要注意一下几点，就可以了：
（1）用date方法进行时间计算，Date(year,month -1 , day)构造指定日期。
（2）new Date()获得现在的时间。
（3）用date计算两个毫秒差异，然后计算日、时、分、秒。
（4）用setInterval方法延迟启动一个js方法，没秒执行一次更新。
代码如下：
<!DOCTYPE html><html>
<head>
<meta charset="gb2312"></meta>
<title>倒计时</title>
<script>
function timer(){
var now = new Date()
var endDate = new Date("2015", "03", "01")
var leftTime = endDate.getTime()- now.getTime()
var leftsecond = parseInt(leftTime/1000)
//var day1=parseInt(leftsecond/(24*60*60*6))
var day1=Math.floor(leftsecond/(60*60*24))
var hour=Math.floor((leftsecond-day1*24*60*60)/3600)
var minute=Math.floor((leftsecond-day1*24*60*60-hour*3600)/60)
var second=Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60)
document.getElementById("timer").innerHTML = day1 + "天" + hour + "时" + minute + "分" + second + "秒"
//每一秒执行一次 timer方法
setInterval("timer()",1000)
}
</script>
</head>
<body onload = "timer()">
距离2015-4-1日还有：
<div id="timer"></div>
</body>
</html>
