jquery 幻灯片 每张图停留时间不同 并且鼠标移动过去停止播放移开后恢复
时间: 2023-05-28 19:04:52 浏览: 55
可以使用jQuery的定时器和鼠标事件来实现幻灯片每张图停留时间不同并且鼠标移动过去停止播放移开后恢复的效果。
HTML结构:
```
<div class="slider">
<ul>
<li><img src="image1.jpg" data-timeout="5000"></li>
<li><img src="image2.jpg" data-timeout="3000"></li>
<li><img src="image3.jpg" data-timeout="4000"></li>
</ul>
</div>
```
CSS样式:
```
.slider {
position: relative;
overflow: hidden;
width: 600px;
height: 400px;
}
.slider ul {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.slider li {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
list-style: none;
}
.slider img {
width: 100%;
height: 100%;
display: block;
}
```
JavaScript代码:
```
$(function() {
var slider = $(".slider");
var ul = slider.find("ul");
var li = ul.find("li");
var img = li.find("img");
var active = 0;
var timer;
// 播放下一张图片
function next() {
active++;
if (active >= li.length) {
active = 0;
}
show();
}
// 显示当前图片
function show() {
li.eq(active).fadeIn().siblings().fadeOut();
var timeout = parseInt(img.eq(active).data("timeout"));
clearInterval(timer);
timer = setInterval(next, timeout);
}
// 鼠标移动到幻灯片上时停止播放
slider.mouseenter(function() {
clearInterval(timer);
});
// 鼠标移开幻灯片时恢复播放
slider.mouseleave(function() {
var timeout = parseInt(img.eq(active).data("timeout"));
timer = setInterval(next, timeout);
});
// 初始化播放
show();
});
```
以上代码实现了每张图片停留时间不同并且鼠标移动过去停止播放移开后恢复的效果。其中,在HTML中使用了data-timeout属性来指定每张图片停留的时间,在JavaScript中使用了定时器和鼠标事件来控制播放和暂停。