<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
list-style: none;
}
#btn li{
height: 30px;
width: 30px;
background-color: wheat;
float: left;
margin-left: 10px;
text-align: center;
line-height: 30px;
}
.imgs{
height: 200px;
width: 300px;
position: fixed;
margin-left: 50px;
}
.imgs img{
height: 200px;
width: 300px;
position: absolute;
margin-top: 50px;
/*margin-right: 100px;*/
}
</style>
</head>
<body>
<ul id="btn">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ul>
<ul class="imgs">
<li><img src="../imgs/1.jpeg" alt=""></li>
<li><img src="../imgs/2.jpeg" alt=""></li>
<li><img src="../imgs/3.jpeg" alt=""></li>
<li><img src="../imgs/4.jpeg" alt=""></li>
</ul>
<script>
var btn = document.querySelectorAll('#btn li');
// console.log(btn);
var imgs = document.querySelectorAll('.imgs img');
// console.log(imgs)
for(let i=0;i<btn.length;i++){
btn[i].onclick = function () { // 0 ,1 ,2 ,3
for(let j=0;j<imgs.length;j++){
if(i===j){
imgs[j].style.zIndex = '1';
}else {
imgs[j].style.zIndex = '-1';
}
}
}
}
</script>
</body>
</html>
js實現圖片自由切換
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.