JS-使用定时器实现焦点图
需求
定时器每秒切换一张图片以及图片上的内容
效果
代码
<!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>焦点图</title>
<style>
.img-box {
width: 400px;
height: 600px;
margin: 20px auto 0;
position: relative;
}
.img-box .tip {
width: 400px;
height: 50px;
line-height: 53px;
position: absolute;
bottom: 100px;
background-color: rgba(0, 0, 0, 0.6);
z-index: 10;
}
.img-box .tip h3 {
width: 82%;
margin: 0;
margin-right: 20px;
padding-left: 20px;
color: #f3f6af;
font-size: 20px;
font-weight: 700;
float: left;
font-family: '楷体', Tahoma, Geneva;
}
.img-box .tip a {
width: 30px;
height: 29px;
display: block;
float: left;
margin-top: 12px;
margin-right: 3px;
}
.img-box ul {
position: absolute;
bottom: 0;
right: 30px;
list-style: none;
z-index: 99;
}
.img-box img {
width: 400px;
height: 600px;
}
</style>
</head>
<body>
<div class="img-box">
<img class="pic" src="images/b01.jpg" alt="第1张图的描述信息" />
<div class="tip">
<h3 class="text">春日，樱花🌸</h3>
</div>
</div>
<script>
// 数据
let data = [
{
imgSrc: 'images/b01.jpg',
title: '春日，樱花🌸',
},
{
imgSrc: 'images/b02.jpg',
title: '田园日记，上演上京记🎈',
},
{
imgSrc: 'images/b03.jpg',
title: '甜蜜攻势再次回归🍬',
},
{
imgSrc: 'images/b04.jpg',
title: '我为歌狂，生为歌王🎤',
},
{
imgSrc: 'images/b05.jpg',
title: '年度校园主题人物👙',
},
{
imgSrc: 'images/b06.jpg',
title: 'pink老师回归，5月10号正式推出🎀',
},
{
imgSrc: 'images/b07.jpg',
title: 'welcome to 上海🍭',
},
{
imgSrc: 'images/b08.jpg',
title: '金发蓝瞳、生日4月2日🌼',
}
]
/*
1. 首先获取到元素(img / h3)
2. 然后用数组元素替换其中的内容
3. 添加定时器产生每秒更换效果
4. 当 i === 8 时，将i重新赋值为0，产生循环效果
*/
let picObj = document.querySelector('.pic')
let txtObj = document.querySelector('.text')
let i = 0
setInterval(function fn() {
i++
if (i === 8) {
i = 0
}
// 默认图是第一张，所以第一次先从第二张开始，首先 i ++
picObj.src = data[i].imgSrc
txtObj.innerHTML = data[i].title
}, 1000)
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-04-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
