各位小伙伴
今天我们就用上次分享的
css 的内容制作简易轮播图了
没看过的小伙伴可以去看一下
那么开始我们今天的分享
css3 制作简易的轮播图
要制作轮播图，首先准备好想要轮播的图片素材，伙伴们可以放上女神的照片哦~我没有女神，只好找点喵主子的图片了~
首先创建一个 img 的文件夹把图片放到一起。
然后就是写代码了！不知道大家知不知道这些标签的作用，不清楚的伙伴可以看一下我之前写的文章哦~
定义轮播图的样式：
这个就是我们的页面效果:
你以为这么简单就结束了吗？我们上面只是把所有的图片定位到了一起，并且让所有图片变透明，只显示第一张图片。
我们实现轮播效果的原理，就是 5 张图片都是透明的，选择那一张，就让哪一张变得不透明，显示出来。还实现不了自动更换的功能哦~不然也不会叫简易轮播图了
下面是定义按钮，以及锚点。
设置按钮的样式，最重要的轮播效果实现，就是最下面的那一行代码，这个轮播我们当初 js 也是很麻烦才弄好的。现在就只用一行代码就实现了，你就说6不6
看一下完整的轮播效果吧！
这要是换成女神的照片，那是多么赏心悦目的景色呀！
完整代码：
Title
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
a{text-decoration:none;color: inherit;}
img{display: block;border:none;}
ol,ul{list-style:none;}
.clearfix:after{content:"";display: block;clear: both;}
.banner{position: relative;width:800px;height:450px;margin:100pxauto;box-shadow:0010px0#000; }
.banner.picimg{width:800px;height:450px;}
.banner.pica{position: absolute;left:0;top:0;opacity:0;transition:1s;}
.banner.pica:nth-child(1){opacity:1; }
.banner.dot{position: absolute;bottom:10px;left:calc(50% - 100px);width:200px;height:30px; }
.banner.dota{float: left;width:30px;height:30px;border-radius:50%;box-shadow:0010px0#000;margin-left:12px; }
.banner.dota:nth-child(1){margin-left:0;}
.banner.dota:hover{background: deeppink;}
.banner.pica:target{opacity:1; }
知道大家时间紧迫，源代码奉上，只要把图片换了就可以用了，使用的时候注意图片路径问题。
那么今天就到这里了
小伙伴们自己动手试一下吧！
我去给喵主子喂食去了
拜拜~
学习Java的同学注意了！！！学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入Java学习交流群：253772578，我们一起学Java！
网友评论