<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* * {
margin: 0;
padding:0;
} */
li {
list-style: none;
}
a {
color: pink;
text-decoration: none;
}
.placeholder {
margin-top: 50px;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<ul>
<li><a href="images/1.jpg">鸡排</a></li>
<li><a href="images/2.jpg">咖喱</a></li>
<li><a href="images/3.jpg">白切鸡</a></li>
<li><a href="images/4.jpg">烧酒</a></li>
<img src="images/5.jpg" alt="my images gallery" class="placeholder">
<script>
var imgs = document.getElementsByTagName('a');
var placeholder = document.getElementsByClassName('placeholder');
for (var i=0; i<imgs.length; i++) {
imgs[i].onclick = function() {
// console.log(this.href);
// console.log(placeholder[0].getAttribute('src'));
placeholder[0].setAttribute('src',this.href);
return false;
}
}
</script>
</ul>
</body>
</html>
JavaScript图片库
最新推荐文章于 2022-06-26 21:17:05 发布