轮播图这东西，我相信只要是做前端的，肯定都做过，不过大部分应该都是用js来实现的，其实css3也是可以实现轮播图的，而且也可以加一些动画之类的，下边就分享下思路。声明，这里没有贬低 js 的意思，相反， js 能做的， css 基本做不到， css 能做的， js 基本能做到，这里纯粹就是为了分享 css 的一些运用。
css 里有个可以绑定到 <input>上的标签 <label>，它的功能就是当你点击所绑定的这个 <label>的时候，就可以选中相应的 <input>，既然有了这个功能，那就有了控制轮播图的方法了。
通过 css 可以看到，其实这个例子主要用到的就是 <input type="radio">的 :checked 伪类选择器然后通错 css3 的 :nth-of-type(n) 节点选择器控制与之相对应的轮播、按钮，整个例子也没什么难度，也就不废话了。
对于初学者最好先了解JavaScript基础和JQuery基础效果；
这里给你一个初学者的简单效果实现方法吧；
这里我们举例：
大背景图片的div类名 class="nav"
三个白点绝对定位到中部的；名字一次是btn1,btn2,btn3
两种方法：
第一种用css实现（白点和背景div必须是同级元素）：
btn1:hover .nav{background:url(图片路径)}
btn2:hover .nav{background:url(图片路径)}
btn3:hover .nav{background:url(图片路径)}
如果要点击效果吧hover换成focus就行了；
JS实现：
$(function(){$(".btn1").click(function(){
$(".nav").css("background","url(1.jpg)")
})
$(".btn2").click(function(){
$(".nav").css("background","url(2.jpg)")
})
$(".btn3").click(function(){
$(".nav").css("background","url(图片路径)")
})
})
用css3可以直接用图片作为背景就可以了，不需要用js。解决方法如下：
1、双击打开HBuilderX开发工具，在Web项目中新建静态页面canvas.html。
2、打开已新建的canvas.html文件，修改title标签里的文字内容。
3、在<body></body>标签内，插入一个canvas标签，并设置id属性值。
4、在canvas标签下，添加script标签并初始化canvas对象，调用自带的方法。
5、保存代码并运行项目，打开浏览器查看界面效果，可以发现绘制了一条线。
6、在style标签中，利用ID选择器设置canvas样式，添加背景色设置。
7、再次保存代码文件，并刷新浏览器，可以看到canvas画布背景色发生了改变。
