标签：博客 本地 family otto bottom tom inpu 函数 改变
一、自动跳转轮播图
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、效果图（等我了解怎么传本地视频再看了）
以上内容参考各位大神，还有些自己的见解，多多包涵！！
标签：博客 本地 family otto bottom tom inpu 函数 改变
原文地址：https://www.cnblogs.com/daheiylx/p/14150382.html
