我正在尝试使用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;}我不需要任何空间,我只想让图像扩大到全屏尺寸。
添加回答
举报
0/150
提交
取消