老师点击小圆点就切换图片，给个思路，我不要答案

球球不一般 2022-08-29

源自：“仿穷游”首页动态项目 3-2 项目作业

收起

1回答

好帮手慕慕子 2022-08-29 13:30:20

同学你好，可以参考如下思路：

1、html结构中，可以给小圆点元素添加自定义属性，用来标识当前被点击小圆点的索引。

2、分别获取所有的小圆点元素和图片元素。

3、遍历所有的小圆点元素，给每个小圆点绑定点击事件，事件函数内部：

（1）先将所有的图片的display属性值设置none隐藏起来，所有的小圆点设置为白色背景。

（2）然后获取当前被点击小圆点元素上的自定义属性值，并设置当前被点击的小圆点背景为蓝色。

（2）最后，根据获取的自定义属性值作为索引，设置对应的图片display属性值为block显示到页面

同学可以尝试实现下，祝学习愉快~

收起回答

提问者球球不一般 #1

<!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>
* {
padding: 0;
margin: 0;
}

#d7 {
position: relative;
}

#d7 img {
width: 100%;
display: block;

}

.dot_box {
position: absolute;
width: 48px;
bottom: 30px;
left: 50%;
margin-left: -24px;
}

.dot {
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #fff;
margin-right: 6px;
float: left;
}

.dot_active {
background-color: #0058AA;
background-color: #fff;
display: none;

}
</style>
</head>

<body>
<div id="box">
<img src="../image/banner01-banner01.png" alt="" class="d7" id="d10">
<img src="../image/banner02-banner02.png" alt="" class="d7" id="d8">
<img src="../image/banner03-banner03.png" alt="" class="d7" id="d9">
<div class="dot_box">
<div class="dot dot_active"></div>
<div class="dot" id="d12"></div>
<div class="dot" id="d11"></div>
</div>
</div>
<script>

var box1 = document.querySelectorAll('#box')
var box_d7 = document.querySelector('#box .d7')
var box_d8 = document.querySelector('#box .dot_box')
var box_d9 = box_d8.querySelector('.dot')

for (var k in box_d9) {
box_d9.onclik = function () {
box_d7.style.display = none;
box_d9.style.backgroundColor = "#fff";
box_d9.style.backgroundColor = "#0058aa";
}
}
</script>
</body>

</html>

2022-08-30 10:01:28
提问者球球不一般 #2

麻烦老师看下怎么写对不

2022-08-30 10:02:38

好帮手慕慕子回复提问者球球不一般 #3

代码中的问题较多，老师直接提供修改后的代码，结合注释了解要修改的地方，如下：

<!DOCTYPE html>
<html>
<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>
* {
padding: 0;
margin: 0;
}
/* 给外层box设置相对定位，并添加overflow属性，超出的隐藏 */
/* #d7 { */
#box {
position: relative;
overflow: hidden;
}
/* 图片外层的盒子设置宽度，能够让所有的图片在一排显示 */
#box .img-wrap {
width: 300%;
}
/* #d7是id选择器，html结构中并没有id属性值为d7的元素 */
/* #d7 img { */
/* 调整选择器 */
#box img {
/* 由于外层盒子设置300%， 里面的盒子均分，设置为33.33%， 课程中讲师也介绍了相关思路*/
/* width: 100%; */
width: 33.33%;
display: block;
/* 设置浮动，让图片在一排显示 */
float: left;
}

.dot_box {
position: absolute;
width: 48px;
bottom: 30px;
left: 50%;
margin-left: -24px;
}
.dot {
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #fff;
margin-right: 6px;
float: left;
}
.dot_active {
/* 只需要设置为蓝色背景 */
background-color: #0058aa;
/* background-color: #fff; */
/* display: none; */
}
</style>
</head>
<body>
<div id="box">
<div class="img-wrap">
<img src="./images/banner.png" alt="" class="d7" id="d10" />
<img src="./images/caosuyan.png" alt="" class="d7" id="d8" />
<img src="./images/chenhaibo.png" alt="" class="d7" id="d9" />
</div>

<div class="dot_box">
<div class="dot dot_active" data-index="0"></div>
<div class="dot" id="d12" data-index="1"></div>
<div class="dot" id="d11" data-index="2"></div>
</div>
</div>
<script>
var box1 = document.querySelectorAll("#box");
//   获取所有的图片，要使用querySelectorAll
//   var box_d7 = document.querySelector("#box .d7");
var box_d7 = document.querySelectorAll("#box .d7");

var box_d8 = document.querySelector("#box .dot_box");
//   获取所有的小圆点，要使用querySelectorAll
//   var box_d9 = box_d8.querySelector(".dot");
var box_d9 = box_d8.querySelectorAll(".dot");

//   标识当前显示第几张图片的索引，默认显示第一张，初始化索引值为0
var curIndex = 0;
//   遍历所有的小圆点元素，给每个小圆点绑定点击事件
//   for (var k in box_d9) { // for...in 默认元素上的其他可遍历的属性也被遍历，这里不推荐使用
for (var k = 0; k < box_d9.length; k++) {
// box_d9保存的是所有小圆点元素，要结合索引去获取其中一个小圆点
// box_d9.onclik = function () { // onclick拼写错误，要注意下
box_d9[k].onclick = function () {
// 遍历图片，先将所有的图片的display属性值设置none隐藏起来，所有的小圆点设置为白色背景。
for (var i = 0; i < box_d7.length; i++) {
box_d7[i].style.display = "none";
box_d9[i].style.backgroundColor = "#fff";
}
//  获取当前被点击小圆点元素上的自定义属性值，并重新赋值给curIndex
curIndex = this.getAttribute("data-index");
// 并设置当前被点击的小圆点背景为蓝色
this.style.backgroundColor = "#0058aa";
//   根据获取的自定义属性值作为索引，设置对应的图片display属性值为block显示到页面
box_d7[curIndex].style.display = "block";
// 获取当前被点击的
//   box_d7.style.display = none;
//   box_d9.style.backgroundColor = "#fff";
//   box_d9.style.backgroundColor = "#0058aa";
};
}
</script>
</body>
</html>

祝学习愉快~

2022-08-30 11:28:47