注意字符串的拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="bigbox"></div>
<ul>
<li><img src="../image/f1.jpg" alt=""></li>
<li><img src="../image/f2.jpg" alt=""></li>
<li><img src="../image/f3.jpg" alt=""></li>
<li><img src="../image/f4.jpg" alt=""></li>
</ul>
</div>
</body>
<style>
body,html,ul,li{
margin: 0px;
padding: 0px;
}
div{
width: 100%;
height: 100vh;
background:url(../image/f1.jpg) no-repeat center top ;
}
ul{
display: flex;
}
li{
list-style: none;
height: 100px;
width: 100px;
background-color: thistle;
}
li img{
height: 100px;
width: 100px;
}
</style>
<script>
var bigbox= document.querySelector(".bigbox")
var lis= document.querySelectorAll("li")
var images=document.querySelectorAll("img")
console.log("花的地址",images)
for(let i=0;i<images.length;i++){
images[i].onclick=function () {
// for(let i=0;i<lis.length;i++){
let imgs=this.src
bigbox.style.backgroundImage='url('+ this.src+')'
// }
}
}
</script>
</html>
1810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
