js使用setInervarl()方法和clearInterval()方法,制作一个图片播放器。当单击按钮“play”,图片开始按一定次序播放,一轮播放结束时,从头继续播放,当单击按钮“stop”时,图片暂停播放,此时再单击按钮“play”时,图片继续播放。播放速度,自定义。
时间: 2024-06-09 11:07:42 浏览: 8
以下是一个简单的图片播放器示例代码:
HTML 代码:
```html
<div>
<img id="slider" src="" alt="Slider">
</div>
<div>
<button id="playBtn">Play</button>
<button id="stopBtn">Stop</button>
<label for="speedInput">Speed:</label>
<input id="speedInput" type="range" min="1" max="10" value="5">
</div>
```
JavaScript 代码:
```javascript
// 图片列表
const images = [
'https://picsum.photos/id/1018/800/600',
'https://picsum.photos/id/1025/800/600',
'https://picsum.photos/id/1043/800/600',
'https://picsum.photos/id/1060/800/600',
'https://picsum.photos/id/1074/800/600'
];
// 获取元素
const slider = document.getElementById('slider');
const playBtn = document.getElementById('playBtn');
const stopBtn = document.getElementById('stopBtn');
const speedInput = document.getElementById('speedInput');
let currentIndex = 0; // 当前显示图片的索引
let intervalId = null; // setInterval 返回的 ID
// 更新图片
function updateImage() {
slider.src = images[currentIndex];
currentIndex = (currentIndex + 1) % images.length; // 显示下一张图片
}
// 播放
function play() {
const speed = speedInput.value; // 获取播放速度
intervalId = setInterval(updateImage, 1000 / speed);
playBtn.innerText = 'Pause';
}
// 暂停
function pause() {
clearInterval(intervalId);
intervalId = null;
playBtn.innerText = 'Play';
}
// 点击播放按钮
playBtn.addEventListener('click', () => {
if (intervalId === null) {
play();
} else {
pause();
}
});
// 点击停止按钮
stopBtn.addEventListener('click', () => {
pause();
currentIndex = 0; // 重置索引
updateImage(); // 显示第一张图片
});
// 拖动速度输入框
speedInput.addEventListener('input', () => {
if (intervalId !== null) {
pause();
play();
}
});
// 初始化
updateImage(); // 显示第一张图片
```
上面的代码使用 `setInterval()` 方法定时更新显示的图片,使用 `clearInterval()` 方法停止定时器。当点击播放按钮时,如果定时器 ID 为 `null`,则开始播放,否则暂停播放。当点击停止按钮时,停止播放并重置显示的图片。当拖动速度输入框时,如果正在播放,则暂停并重新开始播放以更新播放速度。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)