Таймер переключает одно изображение и содержимое изображения каждую секунду.
<!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="Описание первой картинки" />
<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: «Teacher Pink вернулась и официально выйдет 10 мая🎀»,
},
{
imgSrc: 'images/b07.jpg',
title: 'welcome to Шанхай🍭',
},
{
imgSrc: 'images/b08.jpg',
title: «Волосы светлые, глаза голубые, день рождения 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>