开端图片切换demo--入门版「这是我参与2022首次更文挑战的第N天，活动详情查看：2022首次更文挑战」。结构样

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。

结构

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>开端图片切换demo</title>
    <link rel="stylesheet" type="text/css" href="./css/reset.css" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>

<body>
    <div class="main">
        <!-- 图片显示区域 start -->
        <div class="smallImg" id="smallImg">
            <ul>
                <li class="active">
                    <a href="#">
                        <img src="images/small01.webp" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/small02.webp" />
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/small03.webp" />
                    </a>
                </li>
            </ul>
        </div>
        <div class="bigImg" id="bigImg">
            <img src="images/big01.webp" />
        </div>
        <!-- 图片显示区域 end -->
    </div>
    <script type="text/javascript" src="./js/index.js"></script>
</body>

</html>

样式

reset.css

/* 初始化样式 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

input {
    outline: none;
}

a {
    text-decoration: none;
}

button {
    border: none;
}

index.css

.main {
    margin: 30px auto;
    width: 500px;
}

/*上方小图*/

.smallImg {
    width: 460px;
}

.smallImg ul li {
    float: left;
    margin: 25px 25px;
    padding: 5px;
    width: 100px;
    height: 100px;
}

.smallImg ul li a {
    float: left;
    width: 100%;
    height: 100%;
}

.smallImg ul li.active {
    border: 2px solid #91b776;
}

.smallImg ul li img {
    width: 100%;
    height: 100%;
}


/*大图部分*/

.bigImg {
    width: 457px;
    height: 685px;
}

.bigImg img {
    width: 100%;
    height: 100%;
}

效果

鼠标进入哪个小图上，该图就会出现一个浅绿色的边框，其他小图没有边框，边框样式有类名active控制，其次下面的大图也会变成相应的图片，这里只需要变换大图的src属性。

JavaScript部分

var bigImgUrls = [
	"images/big01.webp",
	"images/big02.webp",
	"images/big03.webp",
];

/*
1、获取相关dom节点
2、给三张小图片绑定鼠标进入事件
3、更改大图src属性值
*/

// 1、获取相关dom节点
var smallNodes = document.querySelectorAll("#smallImg ul li");
var bigNode = document.querySelector("#bigImg img");

// 排他思想
function Active(nodes,className,currentNode) {
	for (var i = 0; i < nodes.length; i++) {
		nodes[i].classList.remove(className);
	}
	currentNode.classList.add(className);
}

// console.log(smallNodes);
// 2、给三张小图片绑定鼠标进入事件
for (var i = 0; i < smallNodes.length; i++) {
	// 设置自定义属性保存当前li的索引
	smallNodes[i].setAttribute("data-index", i);
	// 绑定事件
	smallNodes[i].addEventListener("mouseenter", function() {
		var index = parseInt(this.getAttribute("data-index"));
		// 排他思想
		Active(smallNodes,'active',this)
		bigNode.src = bigImgUrls[index];
	});
}

思路分析

首先准备一个数组，用于存放大图片的地址（这里有一个坑，在js文件中写的相对路径提示的是相对js文件的，而我们实际是要替换html文件的路径，所以应该相对html文件）

var bigImgUrls = [
	"images/big01.webp",
	"images/big02.webp",
	"images/big03.webp",
];

然后要获取相关的dom节点，这里就是要获取上面三个小图节点和下面的一个大图，因为三个小图是在li标签里的，所以我们之需要获取li标签即可

// 1、获取相关dom节点
var smallNodes = document.querySelectorAll("#smallImg ul li");
var bigNode = document.querySelector("#bigImg img");

然后我们循环这个li节点列表，给每一个li添加一个自定义属性，属性值就是当前的索引

// 2、给三张小图片绑定鼠标进入事件
for (var i = 0; i < smallNodes.length; i++) {
	// 设置自定义属性保存当前li的索引
	smallNodes[i].setAttribute("data-index", i);
}

循环的同时还要给每个li绑定事件mouseenter，每次鼠标进入时触发事件回调函数，获取当前li的data-index然后根据排他思想去除其他li的acitve类名，给自己添加active，最后变换大图src属性，大图存在数组中，顺序和小图顺序一致，所以直接取第i个即可

for (var i = 0; i < smallNodes.length; i++) {
	// 设置自定义属性保存当前li的索引
	smallNodes[i].setAttribute("data-index", i);
	// 绑定事件
	smallNodes[i].addEventListener("mouseenter", function() {
		var index = parseInt(this.getAttribute("data-index"));
		// 排他思想
		Active(smallNodes,'active',this)
		bigNode.src = bigImgUrls[index];
	});
}

这里将排他思想进行了一层封装，封装成一个方法，第一个参数是一个节点数组，第二个是触发事件需要改变的样式类名，第三个参数是触发事件的当前节点

// 排他思想
function Active(nodes,className,currentNode) {
	for (var i = 0; i < nodes.length; i++) {
		nodes[i].classList.remove(className);
	}
	currentNode.classList.add(className);
}