1,图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片切换</title>
<style>
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<img src = "image/01.jpg" id = "diana">
<br>
<button id = "prev">上一张</button>
<button id = "next">下一张</button>
<script>
var img = document.querySelector('#diana')
var btn1 = document.querySelector('#prev')
var btn2 = document.querySelector('#next')
var minIndex = 1, maxIndex = 3, currentIndex = minIndex;
btn1.onclick = function () {
if(currentIndex == 1){
currentIndex = maxIndex;
}else {
currentIndex--;
}
img.src = 'image/0'+currentIndex+'.jpg';
img.setAttribute('src','image/0${currentIndex}.jpg')
}
btn2.onclick = function () {
if(currentIndex >= maxIndex){
currentIndex = minIndex;
}else {
currentIndex++;
}
img.src = 'image/0'+currentIndex+'.jpg';
img.setAttribute('src','image/0${currentIndex}.jpg')
}
</script>
</body>
</html>
2,显示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示和隐藏</title>
<style>
#new{
width: 200px;
margin-top: 10px;
}
</style>
</head>
<body>
<!--通过点击一个按钮(此时按钮上的文字为隐藏),来隐藏图片,同时按钮上的文字变成’显示‘,再次点击显示,图片出现-->
<button id = 'btu'>隐藏</button>
<br>
<img src = "image/image01.jpg" id = 'new'>
<script>
var img = document.querySelector('#new')
var btn = document.querySelector('#btu')
btn.onclick = function () {
if(this.innerText === '隐藏'){
img.style.display = 'none';
this.innerText = "显示";
}else{
img.style.display = 'block';
this.innerText = '隐藏'
}
}
</script>
</body>
</html>