基于layui轮播图满屏是高度自适应的解决方法


Posted in Javascript onSeptember 16, 2019

在做官网时,遇到轮播图的问题,本来自己写了个轮播图,怎奈有个问题(当我打开页面后去浏览其他页面,回来首页后会有图片会来回闪动,没有正确轮播)一直没有解决。后来看到了layui插件的轮播图,就拿过来用了,但是图片高度不会自适应,图片变形。如图:

基于layui轮播图满屏是高度自适应的解决方法

基于layui轮播图满屏是高度自适应的解决方法

解决办法:

实例代码:

var b = 1920/460;//我的图片比例
 //获取浏览器宽度
 var W = $(window).width();
 var H = $(window).height();
 layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
   elem: '#banner1'
   ,width: '100%' //设置容器宽度
   ,height: (W/b).toString()+"px" //按比例和浏览器可视页面宽度来获取高度
   ,arrow: 'always' //始终显示箭头
   //,anim: 'updown' //切换动画方式
  });
 });
 
//窗口变化是重新加载
$(window).resize(function () {
 // setBanner();
 window.location.reload()
})

以上这篇基于layui轮播图满屏是高度自适应的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
JS delegate与live浅析
Dec 21 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
关于Layui Table隐藏列问题
Sep 16 #Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 #Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 #Javascript
解决微信小程序中的滚动穿透问题
Sep 16 #Javascript
微信小程序左滑删除实现代码实例
Sep 16 #Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 #Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 #Javascript
You might like
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
详解php用static方法的原因
2018/09/12 PHP
Javascript的闭包
2009/12/31 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
《和田的维吾尔》教学反思
2014/04/14 职场文书
大学生活动总结模板
2014/07/02 职场文书
汇报材料怎么写
2014/12/30 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python