上海高端网站定制开发南京市网站seo整站优化
实现效果：
当鼠标悬停在小图（缩略图）上时，大图（预览图）会随之更新为相应的小图，并高亮当前悬浮的小图的父元素。
代码：
1. HTML部分
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>图像放大效果示例</title><link rel="stylesheet" href="styles.css"></head><body><div><img src="./image/image1.jpg" id="bigImg" alt="大图展示"><ul><li class="active"><img src="./image/image1.jpg" alt="小图1" class="smallImg"></li><li><img src="./image/image2.jpg" alt="小图2" class="smallImg"></li><li><img src="./image/image3.jpg" alt="小图3" class="smallImg"></li><li><img src="./image/image4.jpg" alt="小图4" class="smallImg"></li><li><img src="./image/image5.jpg" alt="小图5" class="smallImg"></li></ul></div><script src="script.js"></script></body>
</html>2. CSS部分
* {padding: 0;margin: 0;}body {background-color: #f5f5f5;text-align: center;}#bigImg {width: 300px;height: 300px;border: 2px solid #ccc;margin-bottom: 20px;}ul {list-style: none;overflow: hidden;padding: 0;}ul li {float: left;width: 60px;height: 60px;margin: 10px;border: 2px solid #fff;cursor: pointer;}ul li.active {border-color: red;}ul li img {width: 100%;height: 100%;}3. js部分
注：采用方式一 或 方式二 中的一种方式即可。
方式一：
var bigImg = document.getElementById('bigImg');
var smallImgs = document.getElementsByClassName("smallImg");for (var i = 0; i < smallImgs.length; i++) {smallImgs[i].onmouseover = function() {// 清除所有li的active类var liElements = document.querySelectorAll('ul li');for (var j = 0; j < liElements.length; j++) {liElements[j].classList.remove('active');}// 修改大图的src属性var smallImgSrc = this.getAttribute('src');bigImg.setAttribute('src', smallImgSrc);// 为当前悬浮的img父li添加active类this.parentNode.classList.add('active');}
}代码解析：
1. 变量定义:
bigImg: 通过document.getElementById('bigImg')获取 ID 为bigImg的元素，通常是一个用于显示大图的<img>标签。smallImgs: 通过document.getElementsByClassName("smallImg")获取所有类名为smallImg的元素，通常是小图片的<img>标签集合。
2. 循环遍历小图片:
for (var i = 0; i < smallImgs.length; i++) {
- 使用
for循环遍历每一个小图片。
3. 鼠标悬停事件:
smallImgs[i].onmouseover = function() {
- 为每个小图片绑定
onmouseover事件，当鼠标悬停在小图片上时，执行以下代码：
4. 清除所有 li 的 active 类:
var liElements = document.querySelectorAll('ul li');
for (var j = 0; j < liElements.length; j++) {liElements[j].classList.remove('active');
}
- 通过
document.querySelectorAll('ul li')获取所有ul内的li元素，并遍历它们，移除每个li的active类，确保只有当前的图片有高亮效果。
5. 更新大图的 src 属性:
var smallImgSrc = this.getAttribute('src');
bigImg.setAttribute('src', smallImgSrc);
- 获取当前悬停小图片的
src属性，然后将大图的src属性更新为该小图片的src，以便显示对应的图片。
6. 为当前悬浮的 img 的父 li 添加 active 类:
this.parentNode.classList.add('active');
- 获取当前小图片的父元素（通常是
li），并为其添加active类，以突出显示当前选中的小图片。
方式二：
var bigImg = document.getElementById('bigImg');
var smallImgs = document.querySelectorAll('ul li img');smallImgs.forEach(function(smallImg) {smallImg.onmouseover = function() {// 清除所有li的active类document.querySelectorAll('ul li').forEach(function(li) {li.classList.remove('active');});// 修改大图的src属性var smallImgSrc = this.getAttribute('src');bigImg.setAttribute('src', smallImgSrc);// 为当前悬浮的img父li添加active类this.parentNode.classList.add('active');}
});代码解析：
1. 获取元素：
var bigImg = document.getElementById('bigImg');
var smallImgs = document.querySelectorAll('ul li img');
bigImg：获取大图的元素，假设这个元素的 ID 是bigImg。smallImgs：获取所有小图的元素，这些元素是位于一个无序列表<ul>中的列表项<li>内的图片<img>。
2. 对小图应用事件监听：
smallImgs.forEach(function(smallImg) {smallImg.onmouseover = function() {
- 通过
forEach遍历所有的小图（smallImgs）。 - 对于每一个小图，设置
onmouseover事件，即当鼠标悬停在小图上时触发的函数。
3. 清除所有 li 的 active 类：
document.querySelectorAll('ul li').forEach(function(li) {li.classList.remove('active');
});
- 在鼠标悬停时，先清除所有列表项（
li）的active类名，确保只保留当前被悬停的图像的样式。
4. 修改大图的 src 属性：
var smallImgSrc = this.getAttribute('src');
bigImg.setAttribute('src', smallImgSrc);
this代表当前悬浮的小图对象。通过getAttribute('src')获取当前小图的src属性。- 将获取到的小图的
src赋值给大图的src，从而实现大图更新。
5. 为当前悬浮的 <img> 的父 <li> 添加 active 类：
this.parentNode.classList.add('active');
- 获取当前小图的父元素（即
<li>），并为其添加active类，以便可以通过 CSS 对该元素进行特殊的样式处理，比如高亮显示。