jquery垂直轮播图做背景全屏实例
时间: 2023-08-02 15:11:45 浏览: 56
下面是一个简单的jQuery垂直轮播图做背景全屏的实例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>垂直轮播图做背景全屏实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="background-container">
<ul>
<li style="background-image: url('https://picsum.photos/id/1/1600/900');"></li>
<li style="background-image: url('https://picsum.photos/id/2/1600/900');"></li>
<li style="background-image: url('https://picsum.photos/id/3/1600/900');"></li>
</ul>
</div>
<div class="content">
<h1>这是一个全屏背景的垂直轮播图</h1>
<p>在这里可以添加其他内容</p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
#background-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
#background-container ul {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 300%;
list-style: none;
margin: 0;
padding: 0;
}
#background-container ul li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 33.33%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
animation: slide 10s ease infinite;
}
@keyframes slide {
0% {
transform: translateY(0);
}
33.33% {
transform: translateY(-100%);
}
66.66% {
transform: translateY(-200%);
}
100% {
transform: translateY(0);
}
}
.content {
position: relative;
z-index: 1;
padding: 50px;
text-align: center;
color: #fff;
}
h1 {
font-size: 48px;
margin-bottom: 20px;
}
p {
font-size: 24px;
}
```
jQuery代码:
```
$(document).ready(function() {
var slideHeight = $('#background-container').height() / 3;
$('#background-container ul li').height(slideHeight);
$(window).resize(function() {
slideHeight = $('#background-container').height() / 3;
$('#background-container ul li').height(slideHeight);
});
});
```
在这个实例中,使用了CSS3动画实现了轮播图的滚动效果。通过设置li元素的高度为背景容器高度的1/3,可以实现全屏显示。同时,为了适应窗口大小的变化,使用了jQuery的resize事件来重新设置li元素的高度。
需要注意的是,由于背景容器的定位为fixed,因此在页面中添加其他内容时需要设置z-index属性来控制层级。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)