jquery轮播图之上下轮播
时间: 2023-11-06 19:04:35 浏览: 55
实现上下轮播的jQuery轮播图可以使用以下步骤:
1.创建HTML结构
首先,我们需要为轮播图创建HTML结构。可以使用ul和li元素来创建轮播图。每个li元素将包含轮播图的一个图像。
```
<div class="slideshow">
<ul>
<li><img src="image-1.jpg" alt=""></li>
<li><img src="image-2.jpg" alt=""></li>
<li><img src="image-3.jpg" alt=""></li>
</ul>
</div>
```
2.设置CSS样式
接下来,我们需要设置轮播图的CSS样式。为了使轮播图具有上下滚动的效果,我们需要设置ul元素的高度为轮播图的高度,并将li元素的高度设置为轮播图高度的百分比。
```
.slideshow {
height: 500px;
overflow: hidden;
}
.slideshow ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
}
.slideshow li {
height: 100%;
}
```
3.编写JavaScript代码
最后,我们需要编写JavaScript代码来实现轮播图的滚动效果。我们将使用jQuery库来实现这一点。
我们将使用setInterval函数来定期滚动轮播图。我们需要计算每个li元素的高度,并将其添加到ul元素的顶部。我们还将使用animate函数来添加动画效果。
```
$(document).ready(function() {
var interval = setInterval(function() {
var height = $('.slideshow li:first').height();
$('.slideshow ul').animate({top: -height}, 1000, function() {
$(this).append($('.slideshow li:first')).css({top: 0});
});
}, 2000);
});
```
这将在2秒钟的间隔内滚动轮播图,并在每个li元素的顶部添加一个新的li元素。一旦轮播图滚动到最后一个li元素,它将重新开始从第一个li元素开始滚动。
完整的jQuery上下轮播图代码如下所示:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Slideshow</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.slideshow {
height: 500px;
overflow: hidden;
}
.slideshow ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
}
.slideshow li {
height: 100%;
}
</style>
<script>
$(document).ready(function() {
var interval = setInterval(function() {
var height = $('.slideshow li:first').height();
$('.slideshow ul').animate({top: -height}, 1000, function() {
$(this).append($('.slideshow li:first')).css({top: 0});
});
}, 2000);
});
</script>
</head>
<body>
<div class="slideshow">
<ul>
<li><img src="image-1.jpg" alt=""></li>
<li><img src="image-2.jpg" alt=""></li>
<li><img src="image-3.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
```