实现小图切换大图——美女相册小案例
分析：
- 小图切换大图需要两种图片；
- 需要点击小图设置onclick；
- 根据a标签href属性和img标签src属性设置图片连接；
- 阻止a标签跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>美女相册</title>
<style>
body {
color: #333;
background-color: #ccc;
}
h1 {
color: #333;
padding-left: 200px;
}
a {
color: #c60;
text-decoration: none;
}
ul li {
padding: 0;
list-style: none;
}
ul {
/*弹性盒子*/
display: flex;
}
li {
margin: 0px 20px 20px 0px;
/*主轴两端对齐项目之间，间隔相等*/
justify-content: space-around;
}
ul li a img {
border: 0px;
/*让图片占满盒子*/
display: block;
}
#image {
margin-left: 60px;
}
</style>
</head>
<body>
<h1>美女画廊</h1>
<ul>
<li>
<a href="../images/1.jpg" title="美女1">
<img src="../images/1-small.jpg" width="100" alt="美女A">
</a>
</li>
<li>
<a href="../images/2.jpg" title="美女2">
<img src="../images/2-small.jpg" width="100" alt="美女B">
</a>
</li>
<li>
<a href="../images/3.jpg" title="美女3">
<img src="../images/3-small.jpg" width="100" alt="美女C">
</a>
</li>
<li>
<a href="../images/4.jpg" title="美女4">
<img src="../images/4-small.jpg" width="100" alt="美女D">
</a>
</li>
</ul>
<img id="image" src="../images/placeholder.png" alt="大图" width="400" ;>
<p>请选择一张图片</p>
<script>
// 或取元素
var ulA = document.querySelectorAll('a');
var img = document.querySelector('#image');
var ps = document.querySelector('p');
// 遍历每个 a 按标签
for (let i = 0; i < ulA.length; i++) {
// 事件绑定
ulA[i].onclick = function () {
// 设置大图
img.src = this.href;
// 设置内容
ps.innerText = this.title;
// 阻止a 跳转
return false
};
}
</script>
</body>
</html>
效果图
总结：
- 其实这样将连接在HTML中写死了，还可以将链接写在js中；
- 获取标签属性修改地址；
版权声明：本文为qq_45644092原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。