jQuery 轮播 图片切换单独控制时间
时间: 2023-05-30 12:02:28 浏览: 204
jQuery图片轮播切换
5星 · 资源好评率100%
可以通过设置定时器来单独控制每张图片的展示时间。具体的实现方式如下:
1. 定义一个变量来记录当前显示的图片的索引值,初始值为0。
2. 使用 setInterval() 方法来设置定时器,每隔一定时间切换一次图片。
3. 在定时器中,先将当前显示的图片隐藏,然后将索引值加1,如果已经到达最后一张图片,则将索引值重置为0。
4. 最后,将下一张要显示的图片显示出来。
下面是一个示例代码:
```javascript
$(function() {
var current = 0; // 当前显示的图片的索引值
var duration = 3000; // 图片切换的时间间隔
// 定义定时器,控制图片轮播
setInterval(function() {
// 隐藏当前显示的图片
$('.slider li').eq(current).fadeOut();
// 计算下一张要显示的图片的索引值
current = (current + 1) % $('.slider li').length;
// 显示下一张图片
$('.slider li').eq(current).fadeIn();
}, duration);
});
```
在上面的代码中,我们使用了 jQuery 的 fadeIn() 和 fadeOut() 方法来实现图片的切换效果。具体来说,我们先通过 $('.slider li').eq(current) 获取当前显示的图片,然后调用 fadeOut() 方法将其隐藏。接着,计算下一张要显示的图片的索引值,将其显示出来。由于要循环播放图片,所以在计算索引值时需要使用取模运算符 (%)。最后,我们通过 $('.slider li').eq(current) 和 fadeIn() 方法将下一张图片显示出来。
阅读全文