一. 表格操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
width: 500px;
margin: 50px auto 0;
}
#myModal{
position:fixed;
top:0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);;
}
.modal{
width: 500px;
margin: 50px auto 0;
background: #fff;
}
.close-box {
overflow: hidden;
}
.close{
float: right;
height: 20px;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div class="wraper">
<div class="box">
<button id="add_btn">新增大俠</button>
<table border="1" style="border-collapse:collapse;">
<tr>
<th>姓名</th>
<th>年齡</th>
<th>部門</th>
<th>薪水</th>
<th>操作</th>
</tr>
<tr>
<td>令狐沖</td>
<td>18</td>
<td>技術部</td>
<td>2300</td>
<td>
<button class="btn_del">刪除</button>
|
<button class="btn_edit">編輯</button>
</td>
</tr>
<tr>
<td>張無忌</td>
<td>23</td>
<td>技術部</td>
<td>3300</td>
<td>
<button class="btn_del">刪除</button>
|
<button class="btn_edit">編輯</button>
</td>
</tr>
</table>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="hidden">
<div class="modal">
<div class="modal-content">
<div class="modal-header">
<div class="close-box">
<button class="close"><span>×</span></button>
</div>
<h4 class="modal-title" id="myModalLabel">新增大俠</h4>
</div>
<div class="modal-body">
<p>姓名：<input type="text" id="username"></p>
<p>年齡：<input type="text" id="age"></p>
<p>部門：<input type="text" id="dep"></p>
<p>薪水：<input type="text" id="salary"></p>
</div>
<div class="modal-footer">
<button type="button" id="btn_close" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" id="btn_save" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
</body>
</html>
二. 輪播圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
.box{
width: 500px;
margin: 0 auto;
position: relative;
top:50px;
}
.box ul li a img{
width: 500px;
height: 300px;
}
.box .image li{
position: absolute;
top: 0;
display: none;
}
.box ul li.active{
display: block;
}
.num{
position: absolute;
top: 270px;
left: 170px;
}
.num li{
display: inline-block;
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 18px;
margin-left: 14px;
}
.btn{
width: 30px;
height: 60px;
line-height: 60px;
text-align: center;
position: absolute;
top: 120px;
background: rgba(0,0,0, 0.4);
display: none;
}
.left{
left:0;
}
.right{
right:0;
}
.box:hover .btn{
display: block;
}
.num li.selected{
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<ul class="image">
<li class="active"><a href="javascript:void(0);"><img src="./images/111.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="./images/222.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="./images/333.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="./images/444.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="./images/555.jpg" alt=""></a></li>
</ul>
<ul class="num"></ul>
<div class="btn right"> > </div>
<div class="btn left"> < </div>
</div>
<script src="jquery.js"></script>
<script>
var i = 0;//初始索引值
//動態獲取圖片數
var img_num=$(".image li").length;
// 動態創建小圓點
for(var j=0;j<img_num;j++){
$(".num").append($("<li>"))
}
// 默認給第一個圓點選中
$(".num li").eq(0).addClass("selected");
// 手動輪播
$(".num li").mouseover(function () {
i = $(this).index();
$(this).addClass('selected').siblings().removeClass('selected');
$(".image li").eq(i).addClass("active").siblings().removeClass("active");
});
// 往右輪播
function Go_R() {
if(i == img_num - 1){
i = -1;//重置索引值
}
i++;
$(".num li").eq(i).addClass('selected').siblings().removeClass('selected');
$(".image li").eq(i).addClass("active").siblings().removeClass("active");
}
// 往左輪播
function Go_L(){
if(i == 0){
i = img_num;
}
i--;
$(".num li").eq(i).addClass('selected').siblings().removeClass('selected');
$(".image li").eq(i).addClass("active").siblings().removeClass("active");
}
// 自動輪播
var auto = setInterval(Go_R, 1000);
//綁定按鈕
$(".right").click(Go_R);
$(".left").click(Go_L);
// 當鼠標懸浮時，停止輪播
$(".box").hover(function () {//鼠標懸浮時
clearInterval(auto);//清楚定時器
},function () {//鼠標離開時
auto = setInterval(Go_R,1000);//設置定時器
})
</script>
</body>
</html>
