本文环境:windows10、layui2.5.6,本文适用于所有品牌的电脑。
可以利用layui现成的框架轮播组件来实现轮播图自适应视口缩放效果。
以下是代码:
<section> <div class="layui-carousel" id="test1"> <div carousel-item> <div><img src="img/1.jpg" alt=""></div> <div><img src="img/2.jpg" alt=""></div> <div><img src="img/3.jpg" alt=""></div> <div><img src="img/4.jpg" alt=""></div> <div><img src="img/5.jpg" 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怎么实现轮播图全屏展示的详细内容,更多请关注其它相关文章!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。