效果首先见这里：无JS的简单banner
约定描述：x.y为class为y的x标签；x#y为id为y的x标签；无标签即.y或#y均默认标签为div。
废话不多说，直接上代码：
pug
关于pug的内容本篇不做解释，详情请看：Vue进阶课堂之《从HTML到Pug》
.banners
input.radio(type='radio' checked name='radio')
.banner.red
input.radio(type='radio' name='radio')
.banner.blue
input.radio(type='radio' name='radio')
.banner.green我们用三个banner做实例，由于不用JS，所以我们应该首先想到自带交互的标签，input，且类型是radio或checkbox，由于banner是典型的点选，所以一定使用radio。
最好把banner功能模块单独放在一个div里面（实例中的.banners），方便后期拓展。
label可选，由于本例与label关系不大，所以给注释了，减少理解难度。label与input的关系请自己查阅。
然后三个type为radio、input.radio，各自后面紧跟一个.banner.颜色，没错，这个div就是我们的banner实例，实际使用中，把div内容填充为banner实际内容即可。
注意input的name属性是必须的，否则无法把三个input归类成同一系统下的radio，即没有name，三个input就脱离了关系，不会出现此消彼长的效果。
到这里，我们banner的标签就搞定了。
有没有问题？有问题赶紧留言提出来啊！
当前效果：
sass
看了上面的效果是不是觉得心累，搞了半天就这么个东西，跟裸三个input有什么区别？
别急，我们需要样式帮忙。
关于sass，这里你先就当做没有大括号跟分好的CSS得了。有兴趣自己查阅一下，很强大的东西。
首先，我们还是正常点，通过.banners设置flex布局使得banner控制的锚点在中间。
.banners
display: flex
justify-content: center然后，习惯性的给控制器（锚点）来个手指的覆盖样式，并且设置下距离上面的距离。
.radio
position: relative
top: 70px
cursor: pointer在给三个banner上背景色：
.red
background: red
.blue
background: blue
.green
background: green注意这里由于banner没有大小，所以显示上没有用。
于是乎，我们需要把banner的大小设置好，并且记得把position设为absolute，因为banner的位置是重叠的，如果使用默认或relative会被文档流挤下去。
.banner
position: absolute
top: 0
left: 0
width: 100%
height: 100px
z-index: -1
transition: opacity 1s linear
opacity: 0这里注意：z-index设置-1是为了让单个radio正常显示在banner上面，如果不设置因为absolute脱离文档流，会把input盖住。
transition（过渡）意思是opacity（透明度）的变化会在1s动态linear（线性）展示，新知识点解释如下：
| 属性 | 说明 |
|---|---|
| transtion | 过渡，参数分别是：过渡的属性、过渡时间、过渡效果，上面就是opacity使用过渡，1s时间，线性效果。 |
| opacity | 透明度，从0-1，由看不见到完全看见，注意是透明度，不是是否消失。 |
由于第一个input.radio是checked，所以显示红色。
然后不要忘了交互效果：
.radio:checked + .banner
opacity: 1即被选中的input.radio，后面相邻的.banner透明度为1。
由于上面有设置当.banner的透明度变化会触发过渡效果，所以就呈现了点击下方的控制器，从而交替变化banner的功能。
最终效果如下：
完整sass代码：
.banners
display: flex
justify-content: center
.radio
position: relative
top: 70px
cursor: pointer
.radio:checked + .banner
transform: translateX(0)
opacity: 1
.banner
position: absolute
top: 0
left: 0
width: 100%
height: 100px
z-index: -1
transition: opacity 1s linear
transform: translateX(-100%)
opacity: 0
.red
background: red
.blue
background: blue
.green
background: green效果：无JS的简单banner
我还没想到使用CSS如何自动切换checked，有方法的务必教一下啊~
如果文章对你有一点点的帮助，请关注一波，定期更新技术文章，谢谢。