【ZHYP006】子涵優品開發日誌
輪播圖詳解（一）
其實，輪播圖如果是在開發的時候，我們可以使用一些現成的框架，比如swiper就是很好的輪播圖框架。以往學習的方式都是看視訊，但是為了擺脫這種被動學習的模式，現在要適應閱讀別人的原始碼來學會某種內容，於是我在網上找到一份輪播圖的原始碼，這是原作者的原始碼，開始研究起來了！
HTML部分
<div class="box" id="box"> <div class="inner"> <!--輪播圖--> <ul> <li><a href="#"><img src="./01.jpeg" alt=""></a></li> <li><a href="#"><img src="./02.jpeg" alt=""></a></li> <li><a href="#"><img src="./03.jpeg" alt=""></a></li> <li><a href="#"><img src="./04.jpeg" alt=""></a></li> </ul> <ol class="bar"> 小按鈕數量無法確定，由js動態生成 </ol> <!--左右焦點--> <div id="arr"> <span id="left"> << /span> <span id="right">></span> </div> </div>
根據上面的HTML結構，它一共套了兩層的盒子？為什麼要套兩層呢？先留一個疑問在這裡。然後最裡面的盒子從上到下是：一個無序列表（裡面的li元素巢狀著超連結a元素，超連結a元素巢狀圖片img元素）、一個有序列表（這個應該是結合JavaScript生成分頁器）、最後那個左右箭頭，用來切換圖片。
部分
取消瀏覽器預設樣式
* {
margin: 0;
padding: 0
}
這裡取消的是外邊距和內邊距
最外層盒子的樣式
.box { width: 500px; height: 300px; border: 1px solid #ccc; margin: 100px auto; padding: 5px; }
margin屬性
設定寬度和高度，邊框的，margin這個有點忘記，然後檢視W3Cschool可知，margin: 100px auto;這句話是設定上下外邊距為100px，這個我們也可以看一下控制檯：
再看一下盒子模型的圖，這個100px指的是就是border-top到瀏覽器視窗的距離：
或者看一下這張圖應該可以更好的理解：
margin: auto;
margin: 100px auto;剩下的auto就是讓這個盒子水平居中，也就是左右外邊距根據瀏覽器視窗調整大小，你可以看到當我把瀏覽器視窗縮小時，這個還是水平居中的：
內層盒子的樣式
.inner { width: 500px; height: 300px; position: relative; overflow: hidden; } ul { width: 1000%; position: absolute; list-style: none; left: 0; top: 0; } ol { position: absolute; height: 20px; right: 20px; bottom: 20px; text-align: center; padding: 5px; } #arr { display: none; } #arr span { width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #fff; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑體'; font-size: 30px; color: #000; opacity: 0.5; border: 1px solid #fff; } #arr #right { right: 5px; left: auto; }
子絕父相
這裡的position為什麼要要用relative呢？我的猜測是，因為如果設定relative，那麼我們可以根據圖片的偏移量實現圖片向左移，向右移？但是再往下面看，ul元素的定位用到的是absolute絕對定位，這裡就是所謂的子絕父相，id為inner的這個容器的子元素ul會相對於它的父元素進行定位。設定left: 0;top: 0;，為了讓ul元素緊貼這inner元素。我們也看到ol元素設定了子絕父相，也是同樣道理，設定right: 20px;bottom: 20px;，就是為了分頁器的符號距離inner這個容器右邊和底部20px。在左右兩個箭頭，我們也可以看到它用到了子絕父相，#arr span這是一個交集選擇器，也就是選中id為arr和span元素的交集部分，也就是arr容器中的span元素，也就是那兩個箭頭。left: 5px;top: 50%;這個是給兩個兩個箭頭設定垂直居中，
overflow: hidden;
我們可以看到inner的子元素ul，它的寬度設定的是1000%，這個寬度太長了，所以我們設定 overflow: hidden;，把溢位的部分隱藏起來。
list-style: none;
使用list-style: none;取消列表的li元素前面的小圓點
圖片列表中的樣式
.inner li {
float: left;
}
.inner img {
width: 500px;
height: 300px;
vertical-align: top;
}
浮動
把li元素設定為浮動，這樣圖片就脫離了文件流，也就有橫過來的效果了，文件流這個概念和PS中圖層有點類似。
浮動實驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮動實驗</title>
<style>
div {
float: left;
}
.box {
width: 50px;
height: 50px;
}
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: green;
}
.four {
background-color: pink;
}
.five {
background-color: skyblue;
}
.six {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
</div>
</body>
</html>
vertical-align: top
對於這個，暫時不是很理解它為什麼要設定這，先把問題留在這裡。
左右兩個箭頭的樣式
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #fff;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑體';
font-size: 30px;
color: #000;
opacity: 0.5;
border: 1px solid #fff;
}
#arr > #right {
right: 5px;
left: auto;
}
display: none
這個屬性會將兩個箭頭隱藏起來，它這裡應該會結合後面的JS實現滑鼠移入顯示的。
後代元素選擇器和子元素選擇器
#arr span是一個後代選擇器，所謂的後代選擇器也就是所有的子元素，在這裡就是左右兩個箭頭。
#arr > #right
這裡是我自己修改的，它原本是使用後代選擇器，這裡使用子元素選擇器描述比較好，畢竟ID只有一個。
實現箭頭左右分佈
這裡有兩行關鍵的程式碼，經過我除錯之後才發現這真的是兩行關鍵的程式碼，尤其是left: auto;這個少了它一定不能實現左右分佈。
right: 5px;
left: auto;
left: auto的實驗
我們先看看這個關於left: auto的實驗，看完之後再聽我分析：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實驗</title>
<style>
#out {
width: 200px;
height: 50px;
background-color: yellow;
position: relative;
}
.box {
width: 50px;
height: 50px;
position: absolute;
}
.one {
background-color: red;
left: 10px;
left: auto;
}
.two {
background-color: blue;
right: 10px;
}
</style>
</head>
<body>
<div id="out">
<div class="box one">1</div>
<div class="box two">2</div>
</div>
</body>
</html>
上面設定樣式的原理大概是這樣的，它首先同時為使用後代選擇器對後代，也就是兩個箭頭設定了同樣的樣式，其中就也包括了left: 5px，但是對於右邊的箭頭這個樣式其實不需要的，所以它使用了一個子元素選擇器，選中右邊的箭頭，為它單獨設定一個樣式，設定一個left: auto;就是為了取消上面的後代選擇器中設定的left: 5px;。
top和margin-top
這裡設定top: 50%;margin-top: -20px;，應該是為了兩個箭頭在垂直方向上居中，但是這裡我做了一個實驗，來找出它們之間的區別：
top和margin-top的實驗
<!DOCTYPE html>
<html lang="zh">
<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>
#out1 {
width: 100px;
height: 100px;
background-color: yellow;
}
#box1 {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 20px;
}
#out2 {
width: 100px;
height: 100px;
background-color: skyblue;
}
#box2 {
width: 50px;
height: 50px;
background-color: green;
position: absolute;
margin-top: 20px;
</style>
</head>
<body>
<div id="out1">
<div id="box1"></div>
</div>
<div id="out2">
<div id="box2"></div>
</div>
</body>
</html>
通過觀察上圖，我們不難發現紅色的盒子到父元素的盒子頂部的距離要比綠色的盒子的距離要小，再看看它們的盒子模型，如果我們設定top，它會把盒子以外的距離算上，這裡瀏覽器預設樣式沒有去掉，所以這裡的top: 20px;會把瀏覽器預設的8px一起計算進來。而第二個盒子設定了margin-top: 20px;，忽略掉第一個盒子的100px和瀏覽器的8px，它還自己向下挪了20px。
cursor: pointer
設定這個樣式，你會發現滑鼠在移入輪播圖的時候，滑鼠的形狀變為手指。