一点JS也不懂,利用layui现成的框架轮播组件,简单的实现了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以下的时候图片可能会存在轻微变形,但还是在大部分的移动端设备上还是能实现轮播自适应效果。