缩略图变换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="adv">
<img src="img/bd1.jpg" id="bar"><br>
<img src="img/b1.jpg" id="foo">
<img src="img/b2.jpg" id="foo">
<img src="img/b3.jpg" id="foo">
</div>
<script>
let img = document.querySelectorAll('#foo')
let img1 = document.querySelector('#bar')
for (let i = 0;i<img.length;i+=1){
img[i].addEventListener('mouseover',()=>{
img1.src = `img/bd${i+1}.jpg`
})
}
</script>
</body>
</html>
点击按钮，背景色改变，再次点击，颜色变回原来颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
button{
width: 100px;
height: 50px;
border:none;
color: darkorange;
background-color: aquamarine;
display: block;
outline: none;
cursor: pointer;
margin: 10px auto;
}
</style>
</head>
<body>
<button><input type="checkbox" id="check1">按钮1</button>
<button><input type="checkbox" id="check1">按钮2</button>
<button><input type="checkbox" id="check1">按钮3</button>
<button><input type="checkbox" id="check1">按钮4</button>
<button><input type="checkbox" id="check1">按钮5</button>
<script>
let btn = document.querySelectorAll('button')
let checks = document.querySelectorAll('#check1')
for(let i = 0;i<btn.length;i+=1){
btn[i].addEventListener('click',()=>{
if (!checks[i].checked){
btn[i].style.backgroundColor = 'lightpink'
checks[i].checked=true
}else{
btn[i].style.backgroundColor = 'aquamarine'
checks[i].checked=false
}
})
}
</script>
</body>
</html>
