<style>
#big {
width: 1024px;
height: 350px;
margin: 0 auto;
}
#small img {
width: 155px;
height: 55px;
margin: 4px;
border: 1px solid rgb(177, 100, 100);
}
</style>
</head>
<body>
<div class="big">
<img src="作业/s1.jpg" id="big" ondblclick="info(this)">
</div>
<div id="small"></div>
<img src="img/s1.jpg" width="15%">
<img src="img/s2.jpg" width="15%">
<img src="img/s3.jpg" width="15%">
<img src="img/s4.jpg" width="15%">
<img src="img/s5.jpg" width="15%">
<script>
var big = document.getElementById('big');
var num = 1;
setInterval(function() {
num++;
if (num == 6) {
num = 1;
}
big.src = "作业/s" + num + ".jpg"
}, 5000)
var list = document.getElementById("small").getElementsByTagName("img");
for (var i = 0; i <= list.length; i++) {
list[i].onmouseover = function() {
this.style.opacity = 0.8;
this.style.border = "1px solid #f00";
}
list[i].onmouseout = function() {
this.style.opacity = 1;
this.style.border = "1px solid #ccc";
}
list[i].onclick = function() {
var big = document.getElementById('big')
big.src = this.src
}
}
function info(x) {
alert("当前的图片为:" + x.src)
}
</script>
</body>
大图的 div 的 class 属性被写成了 class="big" 而不是 id="big"。因此，JavaScript 中的 document.getElementById("big") 无法获取该 div 元素，导致后续代码无法正常执行。
可以将 div 的 class 属性改为 id 属性，即将 class="big" 改为 id="big"，就能实现轮廓图动态了。