使用Jquery类库，步骤：
1、准备好html：
<div class="container"><div class="item-list">
<div class="item active"><img src="0.jpg" alt="第1张图"></div>
<div class="item"><img src="1.jpg" alt="第2张图"></div>
<div class="item"><img src="2.jpg" alt="第3张图"></div>
</div>
<div class="item-control">
<a href='javascript:' class="active">●</a>
<a href='javascript:'>●</a>
<a href='javascript:'>●</a>
</div>
</div>
2、为html设置样式
<style>.container{
width: 500px
height: 300px
text-align: center
background: red
position:relative
}
.container>.item-control{
display: inline-block
width: 100%
left: 0
position: absolute
bottom: 10px
background: rgba(0,0,0,0.2)
}
.container>.item-control>a{
font-size: 20px
color: rgba(255,255,255,0.7)
text-decoration: none
}
.container>.item-control>a.active{
color: #fff
}
.container>.item-list,
.container>.item-list>.item{
width: 100%
height: 100%
}
.container>.item-list>.item{
display: none
}
.container>.item-list>.item.active{
display: block
}
</style>
3、编写Js
<script>(function(){
$(document).on('click','.container .item-control a',function(){
var _index = $(this).index()
$(this).addClass('active').siblings().removeClass('active')
$('.container .item-list .item').eq( _index ).addClass('active').siblings().removeClass('active')
})
})()
</script>
最终效果见图：
主要是这句控制：ctx.createRadialGradient(x0,y0,r0,x1,y1,r1)
其中：
x0渐变的开始圆的 x 坐标
y0渐变的开始圆的 y 坐标
r0开始圆的半径
x1渐变的结束圆的 x 坐标
y1渐变的结束圆的 y 坐标
r1结束圆的半径
1. 首先，浏览器会解析HTML文档，将其转换为DOM树；2. 然后，浏览器会解析CSS文档，将其转换为CSSOM树；
3. 接着，浏览器会将DOM树和CSSOM树合并，形成渲染树；
4. 接下来，浏览器会根据渲染树来布局，计算每个节点的位置；
5. 最后，浏览器会将渲染树渲染到屏幕上，显示出一大一小两个包含的圆。
