js中用setInterval()和clearInterval()制作小女孩看书的动态效果
时间: 2024-09-10 09:00:55 浏览: 30
在JavaScript中,`setInterval()` 函数可以用来按照指定的时间间隔(以毫秒为单位)重复执行某个代码块。而 `clearInterval()` 函数则用来停止 `setInterval()` 重复执行的代码块。如果你想通过这两个函数制作一个小女孩看书的动态效果,可以采用以下步骤:
1. 准备两张图片:一张是小女孩看书的静态图片(设为背景图),另一张是翻书的动作图片。
2. 使用 `setInterval()` 设置一个定时器,每隔一定时间(比如3秒),就切换显示的图片,以模拟小女孩翻页看书的效果。
3. 当需要停止动画时,可以使用 `clearInterval()` 来停止定时器。
下面是一个简单的示例代码:
```javascript
// 假设HTML中有一个id为'girlBook'的img元素
var girlBook = document.getElementById('girlBook');
// 图片地址数组,包含翻页前后的图片地址
var bookImages = [
'path_to_book_initial.jpg', // 初始看书图片地址
'path_to_book_turned.jpg' // 翻页后的图片地址
];
var currentImage = 0; // 当前图片的索引
var intervalId; // 用于存储setInterval返回的定时器ID
// 开始翻页动画
function startBookAnimation() {
intervalId = setInterval(function() {
// 切换图片
girlBook.src = bookImages[currentImage];
// 更新图片索引,用于循环显示
currentImage = (currentImage + 1) % bookImages.length;
}, 3000); // 每3秒切换一次图片
}
// 停止翻页动画
function stopBookAnimation() {
clearInterval(intervalId); // 清除定时器
}
// 可以在某个事件触发时开始或停止动画,例如点击按钮
document.getElementById('startButton').addEventListener('click', startBookAnimation);
document.getElementById('stopButton').addEventListener('click', stopBookAnimation);
```
在这个示例中,我们假设已经有了一张展示小女孩看书的背景图片和一张翻页的图片,通过定时器每隔3秒切换一次图片,就可以创建一个简单的翻页效果。当然,实际应用中还需要相应的HTML和CSS代码来完善界面。
阅读全文