请问用JS怎样做这个效果？（点击下边的圆点转换图片）

JavaScript027

请问用JS怎样做这个效果？（点击下边的圆点转换图片）,第1张

使用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. 最后，浏览器会将渲染树渲染到屏幕上，显示出一大一小两个包含的圆。