微信小程序1秒切换一次图片
时间: 2023-10-09 17:07:43 浏览: 256
微信小程序中实现图片1秒切换的效果,可以通过使用定时器来实现。以下是一个简单的示例代码:
```javascript
// 在页面的js文件中
Page({
data: {
images: [
'image1.jpg',
'image2.jpg',
'image3.jpg'
],
currentImageIndex: 0,
timer: null
},
onLoad: function() {
// 开始定时器,每秒切换一次图片
this.startTimer();
},
startTimer: function() {
this.data.timer = setInterval(() => {
// 切换图片
let newIndex = this.data.currentImageIndex + 1;
if (newIndex >= this.data.images.length) {
newIndex = 0;
}
this.setData({
currentImageIndex: newIndex
});
}, 1000);
},
onStop: function() {
// 停止定时器
clearInterval(this.data.timer);
}
});
```
在页面的wxml文件中,可以使用`wx:image`标签来展示当前图片:
```html
<!-- 在页面的wxml文件中 -->
<view>
<image src="{{images[currentImageIndex]}}"></image>
</view>
```
这样,每秒钟图片就会自动切换一次。当需要停止切换时,可以调用`onStop`方法来停止定时器。
阅读全文