首先實現一個功能時，要從整體考慮，將大功能分解為多個小功能，在輪播圖的實現中，首先最直觀的，是展示出來的和未展示出來的足多張圖片、可點選的多個按鈕和底部提示圓點，這三部分；其次是在不進行任何操作的情況下，圖片會自動朝一個方向迴圈滾動；最後是點選不同的按鈕，圖片會朝不同的方向滾動。
注：本例項使用VSCode進行程式設計，Chrome瀏覽器演示效果。
本篇文章主要講解輪播圖製作的第一步——靜態頁面的圖片展示，後續會繼續釋出用原生JS實現功能的部分。
圖片展示
首先從直觀視覺上看，有一張展示出來的圖和隱藏看不見的多張圖、左右兩個箭頭、以及底部的多個提示圓點。 例如下圖：
這裡我們插入三張圖，兩個箭頭和底部三個提示圓點。
首先是基本的HTML程式碼，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>static show</title>
</head>
<body>
<div class="showContainer">
<div class="container"> //包含所有圖片的容器
<img src="../images/cat.jpg" alt="A cat">
<img src="../images/dog1.jpg" alt="A dog">
<img src="../images/dandelion.jpg" alt="dandelion">
</div>
<div class="dots"> //底部的提示圓點
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="left-triangle"> //向左箭頭
<img src="../images/triangle.png" alt="指向左邊的箭頭">
</div>
<div class="right-triangle"> //向右箭頭
<img src="../images/triangle.png" alt="指向右邊的箭頭">
</div>
</div>
</body>
</html>
複製程式碼結果如圖：
此時沒有新增任何樣式，圖片大小不一，所以展示出來的有大有小；底部提示圓點此時還只是一個空的行內元素，不顯示；左右箭頭，我用了一張背景色是透明的，線條顏色為白色的圖片代替，白色背景下的白色圖片當然看不見了。
現在我們給一個灰色的背景色 background: #aaa;，再來效果：
看紅色箭頭指向的地方就是我載入的，那兩張一樣的圖。但是，這兩個箭頭可不是我想要的樣子，現在就讓transform屬性來發揮它的力量吧！去這裡developer.mozilla.org/zh-CN/docs/…看看transform究竟是怎麼回事兒吧！我們現在只使用它的基本的旋轉功能。
transform: rotate(-90deg); //逆時針旋轉90°
transform: rotate(90deg); //順時針旋轉90°
複製程式碼效來看看效果：
哇！左右兩個箭頭也變出來了哦！但是，別忘了，我們要的底部的提示圓點還在躲貓貓呢，那要怎麼把它們找出來呢？那就要需要給他一套新的裝備了。
我們在給提示圓點換裝備之前，要先給他們把工作區搭建好，先把總體樣式顯示效果固定了。為了方便觀察，我將展示區在瀏覽器視窗中居中顯示，並設定其寬高。
.showContainer{
width: 356px;
height: 200px;
border: 10px solid maroon;
background-color: #AAA;
margin: 50px auto;
position: relative;
overflow: hidden;
}
複製程式碼因為包含圖片的容器container要根據其父元素showContainer來定位，所以需要設定其父元素position屬性為relative,關於元素定位，請點選developer.mozilla.org/zh-CN/docs/…檢視詳情。因為展示區每次只需要展示區顯示一張圖即可，其他圖片應該隱藏，利用overflow: hidden;實現隱藏。
效果如下：
再利用定位元素將圖片放在展示區中，且要設定圖片大小。
.container {
width: 9999px;
position: absolute;
left: 0px;
}
.container > img {
display: block;
float: left;
height: 200px;
}
複製程式碼其中container的寬度設定為9999px是為了可以放下多張圖片；container中的img元素只需要設定heihgt即可，圖片會根據容器大小自適應展示。
注意：為方便展示，此處採用了寬高比一致的圖片，只設定height，圖片會根據自身的寬高比得到同樣的width，而且此處圖片容器showContainer寬高設定的恰好與圖片相適應，所以這裡的圖片自適應，是指圖片大小正好與我設定的容器大小吻合，並非圖片隨意試應於任何容器（這種可能會出現，圖片被拉伸的情況）。
現在的效果為：
對了我們好不容易變出來的左右箭頭還不再展示區裡呢，同樣利用元素定位，將左右箭頭分別居中放在展示區的兩邊：
.left-triangle {
position: absolute;
top: 80px;
cursor: pointer;
left: 0;
transform: rotate(90deg);
}
.right-triangle {
position: absolute;
top: 80px;
cursor: pointer;
right: 0;
transform: rotate(-90deg);
}
複製程式碼效果如下：
在這裡我們可以多加一個小小的動畫效果：當滑鼠移動到展示區裡面時，左右箭頭就顯示出來；當滑鼠移出展示區的時候，左右箭頭就消失不見。利用:hover偽類模擬滑鼠懸停效果：
/*初始狀態時，左右箭頭是隱藏的*/
.left-triangle, .right-triangle {
display: none;
}
.showContainer:hover .left-triangle, {
display: block;
}
.showContainer:hover .right-triangle {
display: block;
}
複製程式碼
好了現在提示圓點的工作區已經搭建好了，現在要給提示圓點一套新的裝備了：
- 首先，固定包好提示圓點的容器
dots的位置：
.dots{
width: inherit;
position: absolute;
bottom: 10px;
text-align: center;
}
複製程式碼其寬度繼承其父元素showContainer的寬度，可隨父元素的大小變化而變化。
- 設定提示圓點的樣式：
.dots .dot{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: orange;
margin-right: 10px;
}
複製程式碼因為span元素時行內元素，只有在設定其display為block或者inline-block後才可設定其寬高，利用border-radius實現圓角。效果如下圖：
此時滑鼠懸停在展示區中。
好了，到此為止，所有靜態展示出來的東西都已經大功告成啦！
程式碼優化
- 為了提醒使用者左右箭頭和提示圓點都是可以進行點選的，當滑鼠移動到這些圖示上面時，滑鼠箭頭變成小手裝：
cursor: pointer;
複製程式碼
- 將CSS程式碼用
.css檔案引用到.html檔案中;
<link rel="stylesheet" href="../styles/demo1.css">
複製程式碼- 將複用的樣式程式碼提出來，作為公用的樣式；
- 改變一下邊框和圓點顏色等。
最終程式碼如下：
HTML程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>static show</title>
<link rel="stylesheet" href="../styles/demo1.css">
</head>
<body>
<div class="showContainer">
<div class="container">
<img src="../images/cat.jpg" alt="A cat">
<img src="../images/dog1.jpg" alt="A dog">
<img src="../images/dandelion.jpg" alt="dandelion">
</div>
<div class="dots">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<!--增加triangle類方便設定樣式-->
<div class="left-triangle triangle">
<img src="../images/triangle.png" alt="指向左邊的箭頭">
</div>
<div class="right-triangle triangle">
<img src="../images/triangle.png" alt="指向右邊的箭頭">
</div>
</div>
</body>
</html>
複製程式碼CSS程式碼如下：
.showContainer {
width: 356px;
height: 200px;
border: 10px solid #f5bebe;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.container {
width: 9999px;
position: absolute;
left: 0px;
}
.container>img {
display: block;
float: left;
height: 200px;
}
.triangle{
position: absolute;
top: 80px;
cursor: pointer;
display: none;
cursor: pointer;
}
.left-triangle {
left: 0;
transform: rotate(90deg);
}
.right-triangle {
right: 0;
transform: rotate(-90deg);
}
.showContainer:hover .triangle{
display: block;
}
.dots{
width: inherit;
position: absolute;
bottom: 10px;
text-align: center;
}
.dots > .dot{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #87837e;
margin-right: 10px;
cursor: pointer;
}
複製程式碼為了顯示更加明顯的層級關係，改用less，使用VSCode外掛——Easy Less，可在.less檔案保的同時生成.css檔案，本例項中，.less檔案轉換的.css檔案與上述完全相同。
Less程式碼如下：
.showContainer {
width: 356px;
height: 200px;
border: 10px solid #f5bebe;
margin: 50px auto;
overflow: hidden;
position: relative;
.container {
width: 9999px;
position: absolute;
left: 0px;
img {
display: block;
float: left;
height: 200px;
}
}
.triangle {
position: absolute;
top: 80px;
cursor: pointer;
display: none;
cursor: pointer;
&.left-triangle {
left: 0;
transform: rotate(90deg);
}
&.right-triangle {
right: 0;
transform: rotate(-90deg);
}
}
&:hover .triangle {
display: block;
}
.dots {
width: inherit;
position: absolute;
bottom: 10px;
text-align: center;
.dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #87837e;
margin-right: 10px;
cursor: pointer;
}
}
}
複製程式碼