饿了吗plus 轮播图切换图片回调代码
时间: 2023-10-08 12:11:02 浏览: 54
在饿了吗plus轮播图切换图片时,可以添加回调代码来在图片切换完成后执行一些操作。以下是一个简单的示例:
```javascript
// 获取轮播图容器和图片列表
const sliderBox = document.querySelector('.slider-box');
const sliderItems = document.querySelectorAll('.slider-item');
// 定义回调函数
function onSlideChange() {
console.log('图片切换完成!');
// 在这里可以执行一些其他操作,比如更新页面内容等等
}
// 定义切换图片函数
function changeSlide(index) {
// 切换到指定的图片
sliderItems.forEach((item, i) => {
item.style.display = i === index ? 'block' : 'none';
});
// 执行回调函数
onSlideChange();
}
// 设置定时器进行轮播
let currentIndex = 0;
setInterval(() => {
currentIndex = currentIndex >= sliderItems.length - 1 ? 0 : currentIndex + 1;
changeSlide(currentIndex);
}, 3000);
```
在上面的代码中,我们定义了一个`onSlideChange`函数作为回调函数,并在`changeSlide`函数中调用了它。每当切换图片完成时,都会执行该回调函数,并在控制台输出一条消息。你可以在`onSlideChange`函数中添加你自己的代码,以实现具体的操作。