jQuery 轮播图 每张图停留时间不同 方法
时间: 2023-05-30 18:02:17 浏览: 178
一种实现方法是使用定时器和计时器。假设有三张图片需要轮播,每张图片停留时间分别为2秒、3秒、4秒。具体步骤如下:
1. 定义一个计时器变量,用于记录当前图片已经轮播的时间。
2. 定义一个定时器,用于每隔一段时间切换图片。定时器的回调函数中,首先更新计时器变量,然后判断当前图片是否需要切换,如果需要切换,则切换到下一张图片。
3. 切换图片时,需要根据当前图片的索引和停留时间计算下一张图片的索引。比如当前是第二张图片,停留时间为3秒,那么下一张图片的索引应该是第三张。如果已经到最后一张图片,那么下一张图片应该是第一张。
4. 利用 jQuery 的动画效果,将下一张图片显示出来,同时将当前图片隐藏起来。
以下是示例代码:
```javascript
var currentIndex = 0; // 当前显示的图片的索引
var imageList = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 图片列表
var durationList = [2000, 3000, 4000]; // 每张图片停留时间
var timer = setInterval(function() {
var currentDuration = durationList[currentIndex];
var elapsedTime = parseInt($("#progress").css("width")); // 获取当前图片已经轮播的时间
elapsedTime += 100; // 每次增加100毫秒
if (elapsedTime >= currentDuration) { // 当前图片需要切换
// 计算下一张图片的索引
var nextIndex = (currentIndex + 1) % imageList.length;
currentIndex = nextIndex;
elapsedTime = 0; // 重置计时器变量
// 切换图片
$("#image").fadeOut("slow", function() {
$(this).attr("src", imageList[nextIndex]).fadeIn("slow");
});
}
// 更新进度条
var progress = elapsedTime / currentDuration * 100;
$("#progress").css("width", progress + "%");
}, 100);
```
其中,`#image` 是显示图片的元素,`#progress` 是显示进度条的元素。进度条可以使用 CSS 样式设置,例如:
```css
#progress {
height: 10px;
background-color: #ccc;
width: 0%;
transition: width 0.1s linear;
}
```
这样就可以实现每张图停留时间不同的轮播效果了。