1、图片的切换
包含了定时器以及修改属性的属性
<!DOCTYPE html>
<html lang="zh-CN">
<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>图片切换</title>
</head>
<body>
<img src="./images/1.jpg" alt="" id="flower" width="200" height="200">
<br>
<br>
<button id="preBtn">上一张</button> <button id="nexBtn">下一张</button>
<script type="text/javascript">
let flower = document.getElementById('flower')
let preBtn = document.getElementById('preBtn')
let nexBtn = document.getElementById("nexBtn")
let minIndex = 1, maxIndex = 5; currentIndex = minIndex
// 上一张
nexBtn.onclick = function () {
if (currentIndex === maxIndex) {
currentIndex = minIndex
} else {
currentIndex++
}
console.log(currentIndex);
flower.setAttribute('src', `images/${currentIndex}.jpg`)
}
// 下一张
preBtn.onclick = function () {
if (currentIndex === minIndex) {
currentIndex = maxIndex
} else {
currentIndex--
}
console.log(currentIndex);
flower.setAttribute('src', `images/${currentIndex}.jpg`)
}
// 定时器切换
let timer = setInterval(() => {
currentIndex++
if (currentIndex === maxIndex) {
currentIndex = minIndex
}
flower.setAttribute('src', `images/${currentIndex}.jpg`)
}, 3000)
</script>
</body>
</html>
2、图片的显示与隐藏
<!DOCTYPE html>
<html lang="zh-CN">
<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>图片的显示和隐藏</title>
</head>
<body>
<button id="btn">隐藏</button>
<br>
<img src="./images/10.jpg" alt="" id="new">
<script type="text/javascript">
// 1、获取事件源
let oBtn=document.getElementById('btn')
let newImg=document.getElementsByTagName('img')[0]
// let isShow=true 这是另外一种方法,用一个变量控制
// 绑定事件
oBtn.onclick=function(){
// 事件驱动程序
if(oBtn.innerHTML==='隐藏'){
newImg.style.display = 'none'
oBtn.innerHTML='显示'
// isShow=false
}else{
newImg.style.display = 'block'
oBtn.innerHTML = '隐藏'
// isShow = true
}
}
</script>
</body>
</html>