老师，这个要怎么实现点击向上向上，出现翻页，日期相应发生改变？
来源：6-6 作业题
qq_胜辉_0
2017-08-16 09:31:16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<style type="text/css">
.dutyroster{
width: 680px;
height: 500px;
}
table{
border-collapse: collapse;
}
.dutyroster table .prev {
background: url("../img/icon-scheduling-left.jpg") no-repeat center;
width: 34px;
}
.dutyroster table td{
width:80px;
font-size: 13px;
height:60px;
border:1px solid #dcdddd;
width: 100px;
}
.dutyroster table .next{
text-align: top;
}
.header{
height: 40px;
}
.header a{
color: black;
margin-left: 15px;
}
.header .focus{
color : #60bff2;
display: inline-block;
width: 150px;
}
.bgcolor{
background : #f2f8ff;
color:#60bff2;
}
.date{
border:
width: 100%;
height: 45px;
line-height: 40px;
text-align: center;
border:1px solid #dcdddd;
}
</style>
</head>
<body>
<div class="dutyroster">
<div class="warp">
<div class="header">
<a href="#">科室排班表</a>
<a href="#" class="focus">返回科室列表</a>
</div>
<table>
<tr>
<td class="prev">向上</td>
<td>星期六<br><span>2017-4-15</span></td>
<td>星期日<br><span>2017-4-16</span></td>
<td>星期一<br><span>2017-4-17</span></td>
<td>星期二<br><span>2017-4-18</span></td>
<td>星期三<br><span>2017-4-19</span></td>
<td>星期四<br><span>2017-4-20</span></td>
<td>星期五<br><span>2017-4-21</span></td>
<td class="next" rowspan="4">向下</td>
</tr>
<tr>
<td>上午</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="bgcolor">
<td >中午</td>
<td>约满</td>
<td>约满</td>
<td>约满</td>
<td>约满</td>
<td>约满</td>
<td>约满</td>
<td>约满</td>
</tr>
<tr>
<td>下午</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div class="date">你还没有选择就诊日期</div>
</div>
</div>
</div>
</body>
</html>
1回答
-
小丸子爱吃菜
2017-08-16
这个效果其实和轮播图也很像，只是这个不用它轮播，我们点击相应的按钮时，再出现前面或者后面的内容，所以这个效果可以参考轮播图切换的实现。
日期的实现，你也可以写成固定的日期，如果要写成实时的日期，可以考虑使用循环输出当前日期之后的几周的日期和星期。
自己试一下吧~祝学习愉快！
0
相似问题