展开全部
<!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>Document</title>
<style>
div div {
width: 30px;
height: 30px;
display: inline-block;
border: 1px solid black;
background-repeat: no-repeat;
background-size: 300% 300%;
}
#img1 {
background-position: top left;
}
#img2 {
background-position: top;
}
#img3 {
background-position: top right;
}
#img4 {
background-position: center left;
}
#img5 {
background-position: center;
}
#img6 {
background-position: center right;
}
#img7 {
background-position: bottom left;
}
#img8 {
background-position: bottom;
}
#img9 {
background-position: bottom right;
}
</style>
</head>
<body>
<div>
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
</div>
<div>
<div id="img4"></div>
<div id="img5"></div>
<div id="img6"></div>
</div>
<div>
<div id="img7"></div>
<div id="img8"></div>
<div id="img9"></div>
</div>
<button>next</button>
</body>
<script>
let arr = ["http://iconfont.alicdn.com/t/1522400286994.jpg@100h_100w.jpg", "http://iconfont.alicdn.com/t/1510710350863.png@100h_100w.jpg", "http://iconfont.alicdn.com/t/1553563063102.jpg@100h_100w.jpg"];
let num = 0;
let imgFun = () => {
document.querySelectorAll("div div").forEach(item => {
item.style.backgroundImage = 'url(' + arr[num] + ')';
})
}
imgFun()
document.querySelector("button").onclick = () => {
if (num < arr.length - 1) {
num++;
} else {
num = 0;
}
imgFun()
}
</script>
</html>
请采纳
追问
为什么把array里的换成本地照片就不能next呢
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
