本文环境:windows10、layui2.5.6,本文适用于所有品牌的电脑。
可以利用layui现成的框架轮播组件来实现轮播图自适应视口缩放效果。
以下是代码:
<section> <div class="layui-carousel" id="test1"> <div carousel-item> <div><img src="img/1.jpg-600" alt=""></div> <div><img src="img/2.jpg-600" alt=""></div> <div><img src="img/3.jpg-600" alt=""></div> <div><img src="img/4.jpg-600" alt=""></div> <div><img src="img/5.jpg-600" alt=""></div> </div> </div> <!-- 条目中可以是任意内容,如:<img src=""> --> <script src="layui/layui.js"></script> <script> var b = 1200/360;//我的图片比例 //获取浏览器宽度 var W = $(window).width(); var H = $(window).height(); layui.use('carousel', function(){ var carousel = layui.carousel; //建造实例 carousel.render({ elem: '#test1' ,width: '100%' //设置容器宽度 ,height: (W/b).toString()+"px" //按比例和浏览器可视页面宽度来获取高度 // ,arrow: 'always' //始终显示箭头 //,anim: 'updown' //切换动画方式 }); }); </script> </section>
因为我的section容器是未固定宽度的,所以在自适应缩放页面的时候发现图片并所视口一起缩放,而是随着视口缩放而隐藏掉了,导致轮播里的图片并未显示完整。
JS部分是在搜索来的,根据搜索来的方法虽然图片不会随着视口缩放而隐藏,但图片会随着视口的缩放而变形了,看上去不是那么的美观。
摸索了很久,后通过在Css样式里对.layui-carousel和.layui-carousel下的img设置最小高度,达到了layui框架轮播图自适应视口缩放效果。
以下是Css样式代码:
/*轮播图样式开始*/ .layui-carousel{ min-height: 14rem; } .layui-carousel img{ width: 100%; height: auto; display: block; min-height: 14rem; }
虽然实现了播图自适应视口缩放效果,但在缩放到360px以下的时候图片可能会存在轻微变形,但还是在大部分的移动端设备上还是能实现轮播自适应效果。
以上就是layui怎么实现轮播图全屏展示的详细内容,更多请关注0133技术站其它相关文章!