js循环加载图片,鼠标移入切换
循环载入图片
HTML
<div id="box">
<ul>
<li class="item"><img src="img/img1.webp" /></li>
<li class="item"><img src="img/img2.webp" /></li>
<li class="item"><img src="img/img3.webp" /></li>
<li class="item"><img src="img/img4.webp" /></li>
<li class="item"><img src="img/img5.webp" /></li>
</ul>
</div>
JS
// 获取事件源
function imgLength(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
var items = document.getElementsByClassName("item");
for (let i = 0; i < items.length; i++) {
const item = items[i];
item.index = i + 1;
items[i].onmouseover = function () {
imgLength("box").style.background = `url(img/img${this.index}.webp)no-repeat`;
};
}