一、滚动事件
1.介绍
当页面进行滚动时触发的事件
2.作用
在很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部
3.语法
事件名：scroll
- 监听整个页面滚动
给window 或者document 添加 scroll 事件
- 监听某个元素的内部滚动，直接给某个元素加即可
代码如下
<!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>固定导航</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
height: 150px;
background-color: pink;
}
nav {
height: 50px;
background-color: skyblue;
/* 粘性定位 ，兼容问题，慎用 */
/* position: sticky; */
}
div {
background-color: yellowgreen;
}
.fixed {
position: fixed;
left: 0;
top: 0;
width: 100%;
}
</style>
</head>
<body>
<button>设置页面滚动距离</button>
<header></header>
<nav></nav>
<div>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
<h1>21</h1>
<h1>22</h1>
<h1>23</h1>
<h1>24</h1>
<h1>25</h1>
<h1>26</h1>
<h1>27</h1>
<h1>28</h1>
<h1>29</h1>
<h1>30</h1>
<h1>31</h1>
<h1>32</h1>
<h1>33</h1>
<h1>34</h1>
<h1>35</h1>
<h1>36</h1>
<h1>37</h1>
<h1>38</h1>
<h1>39</h1>
<h1>40</h1>
<h1>41</h1>
<h1>42</h1>
<h1>43</h1>
<h1>44</h1>
<h1>45</h1>
<h1>46</h1>
<h1>47</h1>
<h1>48</h1>
<h1>49</h1>
<h1>50</h1>
<h1>51</h1>
<h1>52</h1>
<h1>53</h1>
<h1>54</h1>
<h1>55</h1>
<h1>56</h1>
<h1>57</h1>
<h1>58</h1>
<h1>59</h1>
<h1>60</h1>
<h1>61</h1>
<h1>62</h1>
<h1>63</h1>
<h1>64</h1>
<h1>65</h1>
<h1>66</h1>
<h1>67</h1>
<h1>68</h1>
<h1>69</h1>
<h1>70</h1>
<h1>71</h1>
<h1>72</h1>
<h1>73</h1>
<h1>74</h1>
<h1>75</h1>
<h1>76</h1>
<h1>77</h1>
<h1>78</h1>
<h1>79</h1>
<h1>80</h1>
<h1>81</h1>
<h1>82</h1>
<h1>83</h1>
<h1>84</h1>
<h1>85</h1>
<h1>86</h1>
<h1>87</h1>
<h1>88</h1>
<h1>89</h1>
<h1>90</h1>
<h1>91</h1>
<h1>92</h1>
<h1>93</h1>
<h1>94</h1>
<h1>95</h1>
<h1>96</h1>
<h1>97</h1>
<h1>98</h1>
<h1>99</h1>
<h1>100</h1>
</div>
<script>
/* // 整个页面滚动
window.addEventListener('scroll',function () {
document.documentElement.scrollTop = 200
}) */
// 单个元素滚动
const button = document.querySelector('button')
button.addEventListener('click',function () {
document.documentElement.scrollTop = 800
})
</script>
</body>
</html>
4.补充知识
document.documentElement.scrollTop 表示可以获取到当前页面的滚动距离
固定导航案例
需求：当页面滚到一定的高度，nav就变成固定定位
分析步骤如下：
- 一定高度就是header的高度 ，150px 需要在页面滚动距离大于或者等于150的时候
- 设置nav 标签做一个固定定位
- 否则取消固定定位
- 小bug，因为nav标签做固定定位，不再拥有高度，脱标，自然会把下面的标签给挡住 解决方式：给nav上面的标签，header标签，添加下外边距大小等于nav的高*/
<!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>固定导航</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
height: 150px;
background-color: pink;
}
nav {
height: 50px;
background-color: skyblue;
}
div {
background-color: yellowgreen;
}
.fixed {
position: fixed;
left: 0;
top: 0;
width: 100%;
}
</style>
</head>
<body>
<header></header>
<nav></nav>
<div>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
<h1>21</h1>
<h1>22</h1>
<h1>23</h1>
<h1>24</h1>
<h1>25</h1>
<h1>26</h1>
<h1>27</h1>
<h1>28</h1>
<h1>29</h1>
<h1>30</h1>
<h1>31</h1>
<h1>32</h1>
<h1>33</h1>
<h1>34</h1>
<h1>35</h1>
<h1>36</h1>
<h1>37</h1>
<h1>38</h1>
<h1>39</h1>
<h1>40</h1>
<h1>41</h1>
<h1>42</h1>
<h1>43</h1>
<h1>44</h1>
<h1>45</h1>
<h1>46</h1>
<h1>47</h1>
<h1>48</h1>
<h1>49</h1>
<h1>50</h1>
<h1>51</h1>
<h1>52</h1>
<h1>53</h1>
<h1>54</h1>
<h1>55</h1>
<h1>56</h1>
<h1>57</h1>
<h1>58</h1>
<h1>59</h1>
<h1>60</h1>
<h1>61</h1>
<h1>62</h1>
<h1>63</h1>
<h1>64</h1>
<h1>65</h1>
<h1>66</h1>
<h1>67</h1>
<h1>68</h1>
<h1>69</h1>
<h1>70</h1>
<h1>71</h1>
<h1>72</h1>
<h1>73</h1>
<h1>74</h1>
<h1>75</h1>
<h1>76</h1>
<h1>77</h1>
<h1>78</h1>
<h1>79</h1>
<h1>80</h1>
<h1>81</h1>
<h1>82</h1>
<h1>83</h1>
<h1>84</h1>
<h1>85</h1>
<h1>86</h1>
<h1>87</h1>
<h1>88</h1>
<h1>89</h1>
<h1>90</h1>
<h1>91</h1>
<h1>92</h1>
<h1>93</h1>
<h1>94</h1>
<h1>95</h1>
<h1>96</h1>
<h1>97</h1>
<h1>98</h1>
<h1>99</h1>
<h1>100</h1>
</div>
<script>
// 获取nav
let nav = document.querySelector('nav')
// 获取header
let header = document.querySelector('header')
window.addEventListener('scroll',function () {
// 获取页面滚动的高度
let scrollTop = document.documentElement.scrollTop
// 判断页面滚动高度
if (scrollTop >= 150) {
nav.classList.add('fixed')
// 解决小bug的
header.style.marginBottom = 50 + 'px'
}else {
nav.classList.remove('fixed')
header.style.marginBottom = 0
}
})
</script>
</body>
</html>
小火箭案例
需求：当页面滚动一定距离，就显示小火箭，否则隐藏， 同时点击小火箭，则返回顶部
/* 一开始我的分析：
1.一开始打开页面颜色为红色
2.当页面滚到一定高度的时候，就开始变颜色。 出现小火箭 ，给小火箭设置一个固定定位 ，否则取消固定定位
3.再拖到一定的高度的时候，又变颜色，不同高度出现不同颜色
4.鼠标经过的时候，小火箭变成动态图片，光标变成小手的样式
5.点击小火箭，返回顶部，回到最开始的颜色
*/
/* 万少做火箭用背景图片来做 用a包裹着
万少思路：1.设置页面的高度 200vh ，设置渐变色
2.先完成静态页面
1.定位 右下角 火箭图片
2.鼠标移上去，火箭图片切换-->会动的火箭图片
3.页面滚动一定距离
让小火箭显示出来
否则小火箭就隐藏*/
<!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>小火箭案例</title>
<style>
body {
height: 300vh;
background-image: linear-gradient(
yellow 30%,
pink 50%,
skyblue 80%,
purple 100%
);
}
a {
/* a 是块级元素，加宽高不生效。改样式。 */
position: fixed;
bottom: 10px;
right: 30px;
width: 150px;
height: 200px;
/* background-color: green; */
background-image: url(http://md.zbztb.cn/uploads/177877617383/gotop.png);
/* display: none; */
}
a:hover {
background-image: url(http://md.zbztb.cn/uploads/177877617383/gotop.gif);
}
</style>
</head>
<body>
<a href="JavaScript:;"></a>
<script>
const a = document.querySelector("a");
window.addEventListener("scroll", function () {
const scrollTop = document.documentElement.scrollTop;
if (scrollTop >= 800) {
// 显示
a.style.display = "block";
// console.log(scrollTop);
} else {
// 隐藏
a.style.display = "none";
// console.log(scrollTop);
}
});
// 有个小bug因为a没有绑定点击事件，也可以点击返回顶部，原因是因为a有空链接的属性，要修改路径 解决方法把a路径改为JavaScript：；加上分号代表结束
// // 设置a被点击后，页面滚动的距离是0
a.addEventListener('click',function () {
document.documentElement.scrollTop = 0
console.log(document.documentElement.scrollTop);
})
</script>
</body>
</html>
小火箭加上动画效果
a.addEventListener("click", function () {
let timeId = setInterval(function () {
document.documentElement.scrollTop -= 20;
console.log('定时器执行', document.documentElement.scrollTop);
// 清除定时器
if (document.documentElement.scrollTop == 0) {
clearInterval(timeId)
}
}, 1000);
});
注意点：过渡属性对于document.documentElement.scrollTop 没有效果
二、加载事件
1.介绍
加载外部资源（如图片，外联CSS和JavaScript）加载完毕时触发的事件
2.作用
有些时候需要等页面资源全部处理完了做一些事情，就比如平时看剧，要先等视频加载完才能自动播放
3.语法
- 事件名：load
- 语法：给Window添加load事件
注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
代码如下
<title>加载事件-load</title>
</head>
<body>
<h1></h1>
<img
src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/33867296_1452769018_259_194.jpg"
alt=""
/>
<script>
// 需求：希望在h1 标题上面显示高度
const h1 = document.querySelector("h1");
window.addEventListener("load", function () {
const img = document.querySelector("img");
// 获取图片标签的宽度
// console.dir("img.height"); //0,是因为代码执行到这里的时候，图片的内容还没有回来
h1.innerHTML = img.height;
});
</script>
-
另外事件名：DOMContentLoaded
-
监听页面DOM加载完毕： 给document 添加 DOMContentLoaded事件
-
语法
-
拓展：早些时期写js习惯写在head标签中，这时候js先执行，但是dom元素还没有开始加载，所以就出现DOMContentLoaded 要先等标签加载完毕时，才去获取dom元素。现在习惯把js写在上面
<title>加载事件-DOMContentLoaded</title>
<!-- 以前写js 习惯写在head标签中 -->
<script>
// 等待标签加载完毕时，才去获取dom元素
document.addEventListener("DOMContentLoaded", function () {
// js 先执行，但是dom元素还没有开始加载
const h1 = document.querySelector("h1");
// console.log(h1);//出现null是因为还没有获取dom元素
h1.innerText = '我们自己修改的';
});
</script>
</head>
<body>
<h1>大标题</h1>
4.总结两者之间的区别
-
load，加载分两部：要先等标签生成了，再获取标签内的外部资源，等待全部加载完才会触发 ，会比较慢
-
DOMContentLoaded 页面的标签加载完毕就触发了，不需要等待标签的内容回来，会比较快
三、元素大小和位置
1.scroll-家族
-
页面滚动 使用 Window.addEventListener('scroll') 事件
页面滚动的距离 document.documentElement.scrollTop
<script> // 整个页面滚动 window.addEventListener('scroll',function () { document.documentElement.scrollTop = 200 }) </script> -
元素滚动 使用 dom.addEventListener("scroll"）事件
元素滚动的距离
dom.scrollTop -可以读取和修改
dom.scrollLeft-可以读取和修改
<title>scroll-家族</title> <style> .scroll-dom { width: 400px; height: 400px; background-color: pink; /* 滚动条 */ /* overflow: scroll; */ overflow-x: scroll; /* 让文字不要换行 */ white-space: nowrap; border: 20px; } </style> </head> <body> <div class="scroll-dom"> <!-- <h1>1</h1> <h1>2</h1> <h1>3</h1> <h1>4</h1> <h1>5</h1> <h1>6</h1> <h1>7</h1> <h1>8</h1> <h1>9</h1> <h1>10</h1> <h1>11</h1> <h1>12</h1> <h1>13</h1> <h1>14</h1> <h1>15</h1> <h1>16</h1> <h1>17</h1> <h1>18</h1> <h1>19</h1> <h1>20</h1> <h1>21</h1> <h1>22</h1> <h1>23</h1> <h1>24</h1> <h1>25</h1> <h1>26</h1> <h1>27</h1> <h1>28</h1> <h1>29</h1> <h1>30</h1> <h1>31</h1> <h1>32</h1> <h1>33</h1> <h1>34</h1> <h1>35</h1> <h1>36</h1> <h1>37</h1> <h1>38</h1> <h1>39</h1> <h1>40</h1> <h1>41</h1> <h1>42</h1> <h1>43</h1> <h1>44</h1> <h1>45</h1> <h1>46</h1> <h1>47</h1> <h1>48</h1> <h1>49</h1> <h1>50</h1> --> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt eligendi saepe, accusamus libero culpa natus mollitia non itaque nihil architecto aperiam commodi qui ipsum, adipisci, vero optio cupiditate quam quaerat! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio tempora ut laboriosam aspernatur, sequi, labore rerum maiores magni ullam voluptatem deserunt minima soluta est a? Error voluptates voluptatibus nulla nesciunt! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio tempora ut laboriosam aspernatur, sequi, labore rerum maiores magni ullam voluptatem deserunt minima soluta est a? Error voluptates voluptatibus nulla nesciunt! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio tempora ut laboriosam aspernatur, sequi, labore rerum maiores magni ullam voluptatem deserunt minima soluta est a? Error voluptates voluptatibus nulla nesciunt! </div> <script> // 获取当前容器滚动了的距离 scrollDom.addEventListener("scroll", function () { // console.log(this.scrollTop); //获取当前容器可以滚动的距离 console.log(this.scrollLeft); //获取当前容器可以滚动的距离 }); </script> </body> -
scrollWidth 整个可以滚动的区间的宽度 （不包含滚动条的大小）
scrollHeight 整个可以滚动的区间的高度 （不包含滚动条的大小）
<title>scroll-家族</title> <style> .scroll-dom { width: 400px; height: 400px; background-color: pink; /* 滚动条 */ /* overflow: scroll; */ overflow-x: scroll; /* 让文字不要换行 */ white-space: nowrap; border: 20px; } </style> </head> <body> <div class="scroll-dom"> <!-- <h1>1</h1> <h1>2</h1> <h1>3</h1> <h1>4</h1> <h1>5</h1> <h1>6</h1> <h1>7</h1> <h1>8</h1> <h1>9</h1> <h1>10</h1> <h1>11</h1> <h1>12</h1> <h1>13</h1> <h1>14</h1> <h1>15</h1> <h1>16</h1> <h1>17</h1> <h1>18</h1> <h1>19</h1> <h1>20</h1> <h1>21</h1> <h1>22</h1> <h1>23</h1> <h1>24</h1> <h1>25</h1> <h1>26</h1> <h1>27</h1> <h1>28</h1> <h1>29</h1> <h1>30</h1> <h1>31</h1> <h1>32</h1> <h1>33</h1> <h1>34</h1> <h1>35</h1> <h1>36</h1> <h1>37</h1> <h1>38</h1> <h1>39</h1> <h1>40</h1> <h1>41</h1> <h1>42</h1> <h1>43</h1> <h1>44</h1> <h1>45</h1> <h1>46</h1> <h1>47</h1> <h1>48</h1> <h1>49</h1> <h1>50</h1> --> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt eligendi saepe, accusamus libero culpa natus mollitia non itaque nihil architecto aperiam commodi qui ipsum, adipisci, vero optio cupiditate quam quaerat! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio tempora ut laboriosam aspernatur, sequi, labore rerum maiores magni ullam voluptatem deserunt minima soluta est a? Error voluptates voluptatibus nulla nesciunt! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio tempora ut laboriosam aspernatur, sequi, labore rerum maiores magni ullam voluptatem deserunt minima soluta est a? Error voluptates voluptatibus nulla nesciunt! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio tempora ut laboriosam aspernatur, sequi, labore rerum maiores magni ullam voluptatem deserunt minima soluta est a? Error voluptates voluptatibus nulla nesciunt! </div> <script> //scrollWidth 不包含 滚动条的大小，等于容器可以滚动的大小 const scrollDom = document.querySelector(".scroll-dom"); // 输出当前它高度 // console.log(scrollDom.scrollHeight); // 输出当前它宽度 // console.log(scrollDom.scrollWidth); </script> </body> -
注意点：PC端的滚动条大小为17px ； 移动端的滚动大小都不占大小
2.offset家族
1.获取宽高
- offsetWidth 获取自身的宽度，包含滚动条
- offsetHeight 获取自身的高度，包含滚动条
代码案例
<title>offset家族</title>
<style>
.offset-dom {
width: 400px;
height: 400px;
background-color: pink;
/* 加上滚动条 */
overflow: scroll;
margin: 10px;
}
</style>
</head>
<body>
<div class="offset-dom"></div>
<script>
const offsetDom = document.querySelector('.offset-dom')
// 获取自身的宽度
console.log(offsetDom.offsetWidth);
// 获取自身的高度
console.log(offsetDom.offsetHeight);
</script>
2.获取位置
-
offsetTop 获取定位了的父元素，垂直距离，上
-
offsetLeft 获取定位了的父元素 ，水平距离，左
-
注意，要是找不到定位的父元素，就相对于页面来计算
代码案例
<title>offset家族</title>
<style>
.offset-dom {
width: 400px;
height: 400px;
background-color: pink;
/* 加上滚动条 */
overflow: scroll;
margin-left: 10px;
}
.parent {
position: fixed;
top: 30px;
left: 200px;
background-color: yellow;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div class="parent">
<h1>标题</h1>
<div>
<div class="offset-dom"></div>
</div>
</div>
<script>
const offsetDom = document.querySelector('.offset-dom')
// 获取定位了父元素的距离
console.log(offsetDom.offsetTop);
console.log(offsetDom.offsetLeft);
</script>
3.client家族
1.获取宽高
- clientWidth 获取元素可见部分宽 不包含边框，滚动条
- clientHeight 获取元素可见部分高 不包含边框，滚动条
代码
<title>client 家族</title>
<style>
.client {
width: 300px;
height: 300px;
background-color: pink;
overflow: scroll;
margin: 100px auto;
border-left: 1px solid #000;
}
</style>
</head>
<body>
<div class="client">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
<h1>21</h1>
<h1>22</h1>
<h1>23</h1>
<h1>24</h1>
<h1>25</h1>
<h1>26</h1>
<h1>27</h1>
<h1>28</h1>
<h1>29</h1>
<h1>30</h1>
</div>
<script>
const clientDom = document.querySelector('.client')
// 获取宽高
console.log(clientDom.clientWidth);
console.log(clientDom.clientHeight);
</script>
</body>
2.获取位置
-
clientLeft 获取元素左边框
-
clientTop 获取元素上边框宽度
-
client右边和下边框没有效果
代码案例
<title>client 家族</title>
<style>
.client {
width: 300px;
height: 300px;
background-color: pink;
overflow: scroll;
margin: 100px auto;
border-left: 1px solid #000;
border-top: 5px solid #000;
}
</style>
</head>
<body>
<div class="client">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
<h1>21</h1>
<h1>22</h1>
<h1>23</h1>
<h1>24</h1>
<h1>25</h1>
<h1>26</h1>
<h1>27</h1>
<h1>28</h1>
<h1>29</h1>
<h1>30</h1>
</div>
<script>
const clientDom = document.querySelector('.client')
// 获取位置
console.log(clientDom.clientLeft);
console.log(clientDom.clientTop);
</script>
-
会在窗口尺寸改变的时候触发事件
事件名：resize
语法
检测屏幕宽度
屏幕大小改变事件案例
<title>屏幕大小改变事件</title> <style> div { width: 1rem; height: 1rem; background-color: pink; font-size: 1rem; } </style> </head> <body> <div>div</div> <script> window.addEventListener('resize',function () { console.log('页面大小发生变化了'); // 当前页面的宽度 console.log(document.body.offsetWidth); // 设置页面html标签的字体大小为屏幕的十分之一 document.documentElement.style.fontSize = document.body.offsetWidth / 10 + 'px' const width = document.body.offsetWidth if(width > 1200) { document.querySelector('title').innerText = `大屏幕${width}` }else if (width > 992) { document.querySelector('title').innerText = `中屏幕${width}` }else if (width > 768) { document.querySelector('title').innerText = `小屏幕${width}` }else { document.querySelector('title').innerText = `极小屏幕${width}` } }) </script>
四、焦点轮播图案例
需求：鼠标经过小图片，当前高亮，其余兄弟变淡 ，同时对应的大图片和标题文字显示
代码
解决方法1:排他思想 -先干掉别人（使用for循环），再复活自己 （通过this或者下标找到自己或者对应的元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>QQ音乐轮播图-排他思想解决方法</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.main {
width: 700px;
margin: auto;
background: #000;
}
.slides {
height: 320px;
position: relative;
}
.slides ul li {
/* display: none; */
position: absolute;
top: 0;
left: 0;
opacity: 0;
/* 这里实现淡入淡出的关键 */
transition: all 0.3s;
}
.slides li.active {
/* display: block; */
opacity: 1;
}
.slides .extra {
width: 700px;
height: 53px;
line-height: 53px;
position: absolute;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 10;
}
.slides .extra h3 {
width: 82%;
margin: 0;
margin-right: 20px;
padding-left: 20px;
color: #98e404;
font-size: 28px;
float: left;
font-weight: 500;
font-family: "Microsoft Yahei", Tahoma, Geneva;
}
.slides .extra a {
width: 30px;
height: 29px;
display: block;
float: left;
margin-top: 12px;
margin-right: 3px;
background-image: url(http://md.zbztb.cn/uploads/177877617383/icon_focus_switch.png);
}
.slides .extra .prev {
background-position: 0 0;
}
.slides .extra .prev:hover {
background-position: -30px 0;
}
.slides .extra .next {
background-position: -60px 0;
}
.slides .extra .next:hover {
background-position: -90px 0;
}
.indicator {
padding: 10px 0;
}
.indicator ul {
list-style: none;
margin: 0 0 0 4px;
padding: 0;
overflow: hidden;
}
.indicator ul li {
position: relative;
float: left;
width: 60px;
margin: 0 4px 0 5px;
text-align: center;
cursor: pointer;
}
.indicator li img {
display: block;
border: 0;
text-align: center;
width: 60px;
}
.indicator li .mask {
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.indicator li .border {
display: none;
width: 54px;
position: absolute;
bottom: 0;
left: 0;
z-index: 20;
border: 3px solid #98e404;
}
/* li里面的mask 和 border 刚开始都是显示的 */
/* 我们写一个样式css */
.indicator .active .mask {
display: none;
}
.indicator .active .border {
display: block;
}
</style>
</head>
<body>
<div class="main">
<div class="slides">
<ul>
<li class="active">
<a href="#"
><img src="./assets/b_01.jpg" alt="第1张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_02.jpg" alt="第2张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_03.jpg" alt="第3张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_04.jpg" alt="第4张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_05.jpg" alt="第5张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_06.jpg" alt="第6张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_07.jpg" alt="第7张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_08.jpg" alt="第8张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_09.jpg" alt="第9张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_10.jpg" alt="第9张图的描述信息"
/></a>
</li>
</ul>
<div class="extra">
<h3>第1张图的描述信息</h3>
<a class="prev" href="javascript:;"></a>
<a class="next" href="javascript:;"></a>
</div>
</div>
<div class="indicator">
<ul>
<li class="active">
<img src="assets/s_01.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_02.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_03.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_04.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_05.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_06.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_07.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_08.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_09.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_10.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
</ul>
</div>
</div>
<script>
// 排他思想方法
const imgsBig = document.querySelectorAll('.slides li')
// console.log(imgsBig);
const imgsSmall = document.querySelectorAll(".indicator li");
const h3 = document.querySelector('.extra h3')
// console.log(h3);
// console.log(imgsSmall);
// 设置小图片光亮
for (let index = 0; index < imgsSmall.length; index++) {
imgsSmall[index].addEventListener("click", function () {
// console.log('事件触发了');
for (let i = 0; i < imgsSmall.length; i++) {
// 先移除所有小图片身上的类
imgsSmall[i].classList.remove('active')
// 移除所有大图片的类
imgsBig[i].classList.remove('active')
}
// 再给点击的小图片增加身上的类
imgsSmall[index].classList.add('active')
// 给大图片增加类
imgsBig[index].classList.add('active')
// 设置h3标题文字
h3.innerHTML = `第${index + 1}张图的描述信息`
});
}
</script>
</body>
</html>
解决方法2 ：精准定位 通过精准定位来找到元素
<script>
// 精准定位方法
const imgsBig = document.querySelectorAll(".slides li");
// console.log(imgsBig);
const imgsSmall = document.querySelectorAll(".indicator li");
const h3 = document.querySelector(".extra h3");
// console.log(h3);
// console.log(imgsSmall);
// 设置小图片光亮
for (let index = 0; index < imgsSmall.length; index++) {
imgsSmall[index].addEventListener("click", function () {
// console.log('事件触发了');
// 先移除所有小图片身上的类
document
.querySelector(".indicator li.active")
.classList.remove("active");
// 移除所有大图片的类
document
.querySelector(".slides li.active")
.classList.remove("active");
// 再给点击的小图片增加身上的类
imgsSmall[index].classList.add("active");
// 给大图片增加类
imgsBig[index].classList.add("active");
// 设置h3标题文字
h3.innerHTML = `第${index + 1}张图的描述信息`
});
}
</script>
