jQuery 可重复使用幻灯片 每张图设定不同时间
时间: 2023-05-29 17:02:54 浏览: 110
以下是一个用 jQuery 实现的可重复使用幻灯片,每张图设定不同时间的示例代码:
HTML:
```html
<div class="slider">
<ul>
<li><img src="image1.jpg" data-time="3000"></li>
<li><img src="image2.jpg" data-time="5000"></li>
<li><img src="image3.jpg" data-time="8000"></li>
</ul>
</div>
```
CSS:
```css
.slider {
position: relative;
overflow: hidden;
}
.slider ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.slider ul li {
position: absolute;
top: 0;
left: 0;
}
.slider ul li img {
display: block;
width: 100%;
height: auto;
}
```
JavaScript:
```javascript
$(function() {
var $slider = $('.slider');
var $sliderUl = $slider.find('ul');
var $sliderLi = $sliderUl.find('li');
var $sliderImg = $sliderLi.find('img');
var sliderCount = $sliderLi.length;
var sliderWidth = $slider.width();
var sliderHeight = $sliderImg.height();
var sliderTime = [];
var currentIndex = 0;
// 获取每张图片的显示时间
$sliderImg.each(function() {
sliderTime.push($(this).data('time'));
});
// 设置第一张图片的显示时间
setTimeout(function() {
slider($sliderLi.eq(currentIndex));
}, sliderTime[currentIndex]);
// 切换图片
function slider($li) {
$li.fadeIn().siblings().fadeOut();
currentIndex++;
if (currentIndex >= sliderCount) {
currentIndex = 0;
}
setTimeout(function() {
slider($sliderLi.eq(currentIndex));
}, sliderTime[currentIndex]);
}
// 设置容器高度
$slider.height(sliderHeight);
// 设置每个 li 的宽度
$sliderLi.width(sliderWidth);
// 设置 ul 的宽度
$sliderUl.width(sliderWidth * sliderCount);
});
```
以上代码实现了一个简单的幻灯片效果,每张图片设定了不同的显示时间,可以通过修改 HTML 中的 data-time 属性来改变每张图片的显示时间。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)