用HTML5写一个照片播放功能,照片动态加载
时间: 2024-03-08 07:48:15 浏览: 10
好的,下面是一个简单的实现:
HTML:
```html
<div id="photo-player">
<img id="photo" src="" alt="photo">
</div>
```
JS:
```javascript
const photoPlayer = document.getElementById('photo-player');
const photo = document.getElementById('photo');
let currentIndex = 0;
const photos = [
'photo1.jpg',
'photo2.jpg',
'photo3.jpg'
];
// 加载照片
function loadPhoto(index) {
photo.src = ''; // 清空图片
const img = new Image();
img.onload = function() {
photo.src = photos[index]; // 加载图片
};
img.src = photos[index];
}
// 自动播放照片
function playPhotos() {
setInterval(function() {
currentIndex++;
if (currentIndex >= photos.length) {
currentIndex = 0;
}
loadPhoto(currentIndex);
}, 2000);
}
// 开始播放照片
loadPhoto(currentIndex);
playPhotos();
```
使用方法:
将需要播放的照片路径存储在 `photos` 数组中,调用 `loadPhoto(index)` 函数即可动态加载对应索引的照片,调用 `playPhotos()` 函数即可自动播放照片。你可以根据需要修改播放间隔时间。