一、自動跳轉輪播圖
1、HTML結構
1 <div id="wrap">
2 <div id="main">
3 <div class="page">One</div>
4 <div class="page">Two</div>
5 <div class="page">Three</div>
6 <div class="page">Four</div>
7 </div>
8 </div>
2、CSS樣式
1 #wrap{
2 position: relative;
3 margin: auto;
4 top: 10px;
5 left: 0;
6 height: 250px;
7 width: 500px;
8 overflow:hidden;
9 #main{ 10 width: 2000px;
11 position:relative;
12 transition: all 0.5s;
13 animation: auto_slide 6s steps(1, end) infinite;
14 .page{ 15 float: left;
16 height: 250px;
17 width: 500px;
18 margin:0;
19 font-size: 26px;
20 font-weight: bold;
21 color: #fff;
22 display: flex;
23 align-items: center;
24 justify-content: center;
25 &:nth-child(1) { 26 background:rgb(195, 185, 240);
27 }
28 &:nth-child(2) {
29 background: rgb(15, 221, 211);
30 }
31 &:nth-child(3) {
32 background: rgb(236, 173, 217);
33 }
34 &:nth-child(4) {
35 background: rgb(241, 161, 141);
36 }
37 } 38 } 39 @keyframes auto_slide {
40 0% , 100% { 41 left: 0;
42 }
43 25% {
44 left: -500px;
45 }
46 50% {
47 left: -1000px;
48 }
49 80% {
50 left: -1500px;
51 }
52
53 } 54 }
主要是通過#wrap元素css樣式設置 overflow：hidden，通過改變#main元素 的 left 屬性和 animation 屬性，實現輪播圖，其中.page元素設置float：left ，使之並排。
3、效果圖（不懂怎么在博客園插入本地電腦的視頻，見諒！）
拓展：
steps()是一個timing-function（animation中），允許我們將動畫或者過渡分割成段，而不是從一種狀態持續到另一種狀態的過渡。
nimation默認以ease方式過渡，會以在每個關鍵幀之間插入補充動畫，所以動畫效果是連貫性的。ease，linear等之類的過渡函數都會為其插入緩慢的效果。
但有些效果不需要補間，只需要關鍵幀之間的跳躍，這時應該使用steps過渡方式。如上面所示。
使用方法：
steps ( n,[start | end] )
n是一個自然數，steps函數把動畫分成n等份。
step-start等同於steps(1,start)，動畫分成 1 步，動畫執行時以左側端點為開始step-end等同於 steps(1,end) ，動畫分成 1 步，動畫執行時以結尾端點為開始
舉例子：
steps(4,start) 與 steps(1,start) 的最大區別就是每次動畫”跳躍”的時候，即從 0% -> 25% 的時候，
steps(1) 直接一步到位，瞬間從0%的狀態跳到25%的狀態，
steps(4)會逐漸走4步，即從 0% -> 25% 要跳 4 步 。
二、點擊跳轉輪播圖
1、HTML結構
1 <div id="click_slider">
2 <input type="radio" name="sliderInput" value="0" id="sliderInput1" checked hidden/>
3 <label for='sliderInput1'>1</label>
4 <input type="radio" name="sliderInput" value="1" id="sliderInput2" hidden/>
5 <label for='sliderInput2'>2</label>
6 <input type="radio" name="sliderInput" value="2" id="sliderInput3" hidden/>
7 <label for='sliderInput3'>3</label>
8 <input type="radio" name="sliderInput" value="3" id="sliderInput4" hidden/>
9 <label for='sliderInput4'>4</label>
10 <div id="click_main">
11 <div class="page">點擊One</div>
12 <div class="page">點擊Two</div>
13 <div class="page">點擊Three</div>
14 <div class="page">點擊Four</div>
15 </div>
16 </div>
2、CSS樣式
1 #click_slider{
2 position: relative;
3 margin: auto;
4 top: 10px;
5 left: 0;
6 height: 250px;
7 width: 500px;
8 overflow:hidden;
9 margin-top: 50px;
10 #click_main{ 11 width: 2000px;
12 position:relative;
13 transition: all 0.5s;
14 .page{ 15 float: left;
16 height: 250px;
17 width: 500px;
18 margin:0;
19 font-size: 26px;
20 font-weight: bold;
21 color: #fff;
22 display: flex;
23 align-items: center;
24 justify-content: center;
25 &:nth-child(1) { 26 background:rgb(195, 185, 240);
27 }
28 &:nth-child(2) {
29 background: rgb(15, 221, 211);
30 }
31 &:nth-child(3) {
32 background: rgb(236, 173, 217);
33 }
34 &:nth-child(4) {
35 background: rgb(241, 161, 141);
36 }
37 } 38 } 39 label[for^='sliderInput'] {
40 position: absolute;
41 bottom: 20px;
42 width: 20px;
43 height: 20px;
44 margin: 0 30px;
45 border-radius: 50%;
46 cursor: pointer;
47 z-index: 2;
48 color: #000;
49 background-color: #fff;
50 font-weight: bold;
51 font-size: 14px;
52 text-align: center;
53 line-height: 20px;
54 }
55 label[for="sliderInput1"] {
56 left: 0px;
57 }
58 label[for="sliderInput2"] {
59 left: 30px;
60 }
61 label[for="sliderInput3"] {
62 left: 60px;
63 }
64 label[for="sliderInput4"] {
65 left: 90px;
66 }
67 #sliderInput1:checked {
68 &+label { 69 color: #fff;
70 background-color: #000;
71 }
72 &~div[id='click_main'] {
73 left: 0px;
74 }
75 } 76 #sliderInput2:checked {
77 &+label { 78 color: #fff;
79 background-color: #000;
80 }
81 &~div[id='click_main'] {
82 left: -500px;
83 }
84 } 85 #sliderInput3:checked {
86 &+label { 87 color: #fff;
88 background-color: #000;
89 }
90 &~div[id='click_main'] {
91 left: -1000px;
92 }
93 } 94 #sliderInput4:checked {
95 &+label { 96 color: #fff;
97 background-color: #000;
98 }
99 &~div[id='click_main'] {
100 left: -1500px;
101 }
102 } 103 }
3、效果圖（等我了解怎么傳本地視頻再看了）
以上內容參考各位大神，還有些自己的見解，多多包涵！！