各位小伙伴
今天我们就用上次分享的
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: 100px auto;box-shadow: 0 0 10px 0 #000; }
.banner .pic img{ width: 800px; height: 450px;}
.banner .pic a{ position: absolute; left: 0; top: 0; opacity: 0; transition: 1s;}
.banner .pic a:nth-child(1){ opacity: 1; }
.banner .dot{ position: absolute; bottom: 10px; left: calc(50% - 100px); width: 200px;height: 30px; }
.banner .dot a{ float: left; width: 30px; height: 30px; border-radius: 50%;box-shadow: 0 0 10px 0 #000;margin-left: 12px; }
.banner .dot a:nth-child(1){ margin-left: 0;}
.banner .dot a:hover{ background: deeppink;}
.banner .pic a:target{ opacity: 1; }
知道大家时间紧迫，源代码奉上，只要把图片换了就可以用了，使用的时候注意图片路径问题。
那么今天就到这里了
小伙伴们自己动手试一下吧！
我去给喵主子喂食去了
拜拜~
网友评论