我正在尝试使用bxslider创建全屏淡入淡出幻灯片演示，但是我无法完成一件事。幻灯片进行得很好时，图像周围有空间。我想将图像扩展到整个窗口...
幻灯片进行得很顺利。
的HTML
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>Fading image slideshow</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
</head>
<body>
<ul id="slider">
<li style="background-image: url(img01.jpg);"></li>
<li style="background-image: url(img02.jpg);"></li>
<li style="background-image: url(img03.jpg);"></li>
<li style="background-image: url(img04.jpg);"></li>
<li style="background-image: url(img05.jpg);"></li>
<li style="background-image: url(img06.jpg);"></li>
</ul>
<script>
$(function() {
$('#slider').bxSlider({
mode: 'fade',
speed: 2000,
pause: 8000,
auto: true,
pager: false,
controls: false,
touchEnabled: false
});
});
</script>
</body>
的CSS
body {
margin: 0;
padding: 0;
}
.bx-viewport {
left: 0;
box-shadow: none;
border: none;
}
#slider li {
height: 100vh;
width: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
我不需要任何空间，我只想让图像扩大到全屏尺寸。
吃鸡游戏
Qyouu
相关分类