imgs
58輪播圖練習imgs 
58輪播圖練習imgs 58輪播圖練習imgs 58輪播圖練習imgs <!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京東輪播圖練習</title>
<style>
/* 取消清單自帶樣式 */
.img-list ul {
margin: 0;
padding: 0;
}
.img-list li {
list-style: none;
/*
原本li是垂直排列的對不對，現在讓它們都脫離文檔流，然後它們就可以全部重疊在一起了
當我們想讓某張圖檔顯示在最上面的時候，我們隻需要更改它的層級就行了
*/
position: absolute;
}
.img-list {
width: 590px;
height: 470px;
margin: 100px auto;
/*
這一步的目的是讓img-list成為pointer的包含塊，用relative，同時也不會打亂本身元素對于整體的布局（不會脫離文檔流那些）
*/
position: relative;
}
/*
更改子元素層級，進而顯示不同的圖檔出來
用到:nth-child()這個選擇器
*/
.img-list li:nth-child(1) {
z-index: 1;
}
/* pointer容器提高層級，這樣才能顯示在圖檔上面 */
.pointer {
position: absolute;
bottom: 20px;
z-index: 999;
margin-left: 20px;
}
/* 設定點選小點 */
.pointer a {
float: left;
display: block;
width: 10px;
height: 10px;
background-color: rgba(220,220,220,0.7);
/*
這個是讓邊框的背景顔色和元素的背景顔色不一樣
如果不設定這個，那麼我們的邊框設定成透明了，但是它卻會讓邊框顯示成bgcolor
*/
background-clip: content-box;
margin-left: 10px;
/* 設定圓角效果，50%就是一個圓 */
border-radius: 50%;
/*
設定一個邊框
不然有active的點和沒有active的點不在一個水準上
*/
border: 3px solid transparent;
}
.pointer a:hover,
.pointer .active{
background-color: white;
border: 3px solid rgba(220,220,220,0.7);
}
</style>
</head>
<body>
<ul class="img-list">
<li><a href="javascript:;"><img src="./imgs/jd1.jpg"></a></li>
<li><a href="javascript:;"><img src="./imgs/jd2.jpg"></a></li>
<li><a href="javascript:;"><img src="./imgs/jd3.jpg"></a></li>
<li><a href="javascript:;"><img src="./imgs/jd4.jpg"></a></li>
<div class="pointer">
<a class="active" href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</ul>
</body>
</html>
