为了账号安全,请及时绑定邮箱和手机立即绑定

我想用bxslider插件创建一个全屏的交叉淡入淡出幻灯片演示

我想用bxslider插件创建一个全屏的交叉淡入淡出幻灯片演示

慕姐4208626 2021-04-27 05:06:47
我正在尝试使用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>的CSSbody {  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;}我不需要任何空间,我只想让图像扩大到全屏尺寸。
查看完整描述

2 回答

?
吃鸡游戏

TA贡献1829条经验 获得超7个赞

尝试通过添加以下样式来重置默认边距和填充:


ul#slider{

 margin: 0;

 padding: 0

}


查看完整回答
反对 回复 2021-05-06
?
Qyouu

TA贡献1786条经验 获得超11个赞

您好,请检查下面的CSS代码,将其添加到您的CSS中,然后检查,也请确认我。 ul#slider{margin: 0px;}

        ul#slider li{left: 0px;}

        .bx-wrapper{margin: 0px; border: 0px;}


查看完整回答
反对 回复 2021-05-06
  • 2 回答
  • 0 关注
  • 165 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信