目录
一、实战案例:定时轮播图案例-中版
需求:每隔一秒自动切换一个图片和标题、小圆点颜色
分析:
1.准备一个数组对象,存储详细信息
2.获取元素
3.设置间歇函数,定时修改图片和标题小圆点
4.处理图片自动复原,从头播放
代码实现
<!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>
<style>
.newbh{
color: red;
}
img{
height: 100px;
width: 200px;
}
</style>
<body>
<div>
<div class="div2">
<img src="1.jpg" >
<div>
<span id="a">熊猫能有什么坏心思</span>
<div>
<ul>
<li class="newbh"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
<script>
//准备一个数组对象,存储详细信息
let message = [
{src:'1.jpg',title:'熊猫能有什么坏心思'},
{src:'2.jpg',title:'小兔子为什么这么白?'},
{src:'3.jpg',title:'狗狗对人类很忠诚'},
{src:'4.jpg',title:'猫咪凶起来谁都不怕'}
]
let i = 0
//获取元素
const imgObject = document.querySelector('img')
const spanObject = document.querySelector('#a')
//设置间歇函数,定时修改图片和标题、小圆点
let id = setInterval(fn , 1000)
function fn(){
i++
//判断是否超过了最后一张,如果是,则重新赋值为0,图片从头开始播放
if( i == message.length){
i = 0
}
//更新图片和标题
imgObject.src = message[i].src
spanObject.innerHTML = message[i].title
//选出含有newbh的li标签对象,然后将其class删除
const liObject = document.querySelector('.newbh')
liObject.classList.remove('newbh')
const ulliObject = document.querySelector(`ul li:nth-child(${i+1})`)
ulliObject.classList.add('newbh')
}
</script>
</html>