实现效果:
当鼠标悬停在小图(缩略图)上时,大图(预览图)会随之更新为相应的小图,并高亮当前悬浮的小图的父元素。
代码:
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 对该元素进行特殊的样式处理,比如高亮显示。