案列介绍
我们在写网页和app的时候经常看到轮播图,通过小按钮或者左右箭头按钮操作切换图片,点击到当前的小按钮并改变它的样式,并实现切换图片,本案例是写一个切换按钮的小案例。
一、大概步骤
注意:有很多实现的方法,不一定是这一种
1、用无序标签在网页上做出几个小圆点
2、修改每个小圆圈的样式
3、js获取到每个li的元素对象
4、用循环实现点击第n个li时改变li样式
5、注意点击当前li后排除其他的li
二、代码
1.html
代码如下(示例):
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
2.css
代码如下(示例):
ul {
/* 设置ul的宽度和弹性布局 */
width: 120px;
display: flex;
justify-content: space-evenly;
}
li {
/* 设置每个li的为圆形和默认背景颜色 */
list-style: none;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
}
/* 点击后的北京颜色 */
.clickli {
background-color: red;
}
/*默认背景颜色 */
.libg {
background-color: #ccc;
}
3.js
核心代码如下(示例):
提示:获取元素的方法还有很多比如 document.querySelectorAll('li')写在注释里了。在js修改元素的样式方法也有多种,在注释里。
//方法:巧用this,单击当前元素时改变
//用getElementsByTagName获取到所有li元素对象(集合)获取到的是HTMLcollection对象
var lis = document.getElementsByTagName('li');
// console.log(lis);
//利用循环完成点击下标为n时改变第n个元素的背景颜色。
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
//先给所有的li都设置为原来的颜色,要写this前面
for (var j = 0; j < lis.length; j++) {
// lis[j].style.backgroundColor = '#ccc';
lis[j].className = 'libg'
}
//this指向当前点击的i,索引号为i,点击时改变当前li的背景颜色
// this.style.backgroundColor = 'red';
this.className = 'clickli'
}
}
不排除其他li的元素时会是这样的
修改之后
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
/* 设置ul的宽度和弹性布局 */
width: 120px;
display: flex;
justify-content: space-evenly;
}
li {
/* 设置每个li的为圆形和默认背景颜色 */
list-style: none;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
}
/* 点击后的北京颜色 */
.clickli {
background-color: red;
}
/*默认背景颜色 */
.libg {
background-color: #ccc;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
//方法:巧用this,单击当前元素时改变
//用getElementsByTagName获取到所有li元素对象(集合)获取到的是HTMLcollection对象
var lis = document.getElementsByTagName('li');
// 用querySelectorAll获取所有li元素对象,获取到的是NoteList对象
// var lis=document.querySelectorAll('li');
// console.log(lis);
//利用循环完成点击下标为n时改变第n个元素的背景颜色。
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
//先给所有的li都设置为原来的颜色,要写this前面
for (var j = 0; j < lis.length; j++) {
// lis[j].style.backgroundColor = '#ccc';
lis[j].className = 'libg'
}
//this指向当前点击的i,索引号为i,点击时改变当前li的背景颜色
// this.style.backgroundColor = 'red';
this.className = 'clickli'
}
}
</script>
</html>