效果图
点击图片上的小圆点时依次出现对应的图片
代码分解
css部分
<style>
.box{ /*最大的盒子*/
width: 400px;
height: 500px;
border: 1px solid #cccccc;
position: relative;
margin: auto;
}
img{ /* 图片大小 */
width: 400px;
height: 500px;
position: absolute;
left: 0px;
top: 0px;
}
.circle{ /*放焦点的盒子 即放圆的盒子*/
height: 40px;
position: absolute;
right: 20px;
bottom: 0px;
z-index: 2; /*层级上移*/
}
.item{
width: 10px;
height: 10px;
border-radius: 5px;
box-shadow: 0px 0px 2px 2px white;
float: left; /*圆点向左浮动，即依次排列，左右边距为5*/
margin: 0px 5px;
}
</style>
js部分
for循环嵌套循环
<script>
//获取焦点 图片 对象
var item=document.getElementsByClassName('item');
var imgs=document.getElementsByTagName('img');
for(var i=0;i<5;i++){
item[i].index=i;
item[i].onclick=function(){ //给焦点绑定点击事件
for(var j=0;j<5;j++){
item[j].style.backgroundColor='transparent'; //焦点颜色为透明
imgs[j].style.zIndex=0; //图片层级为0
}
this.style.backgroundColor='orange'; //焦点颜色为橙色
imgs[this.index].style.zIndex=1; //图片层级为1，出现在上层
}
}
</script>
整体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{ /*最大的盒子*/
width: 400px;
height: 500px;
border: 1px solid #cccccc;
position: relative;
margin: auto;
}
img{ /* 图片大小 */
width: 400px;
height: 500px;
position: absolute;
left: 0px;
top: 0px;
}
.circle{ /*放焦点的盒子 即放圆的盒子*/
height: 40px;
position: absolute;
right: 20px;
bottom: 0px;
z-index: 2; /*层级上移*/
}
.item{
width: 10px;
height: 10px;
border-radius: 5px;
box-shadow: 0px 0px 2px 2px white;
float: left; /*圆点向左浮动，即依次排列，左右边距为5*/
margin: 0px 5px;
}
</style>
</head>
<body>
<div class="box">
<img src="./img/b0.jpg" alt="" style="z-index: 1;"> <!-- 将第一张图放在最上面 -->
<img src="./img/b1.png" alt="">
<img src="./img/b3.png" alt="">
<img src=".//img/b4.jpg" alt="">
<img src="./img/b6.jpg" alt="">
<div class="circle">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<script>
//获取焦点 图片 对象
var item=document.getElementsByClassName('item');
var imgs=document.getElementsByTagName('img');
for(var i=0;i<5;i++){
item[i].index=i;
item[i].οnclick=function(){ //给焦点绑定点击事件
for(var j=0;j<5;j++){
item[j].style.backgroundColor='transparent'; //焦点颜色为透明
imgs[j].style.zIndex=0; //图片层级为0
}
this.style.backgroundColor='orange'; //焦点颜色为橙色
imgs[this.index].style.zIndex=1; //图片层级为1，出现在上层
}
}
</script>
</body>
</html>
流程控制语句
for循环
for(①表达式一;②表达式二;③表达式三){
// ④循环体
}
-
表达式一：变量
-
表达式二：结束循环的比较表达式
-
表达式三：改变循环的表达式
-
实现循环过程
- 第一遍循环：先执行①；再执行②；判断成立，执行④；再执行③；继续执行②
- 第二遍循环：执行②成立，继续执行④…
- 直到②表达式不成立，那么结束循环