基于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 DOM 学习第二章 编辑文本
Feb 19 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 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
PHP 组件化编程技巧
2009/06/06 PHP
composer.lock文件的作用
2016/02/03 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
python通过smpt发送邮件的方法
2015/04/30 Python
python实现复制整个目录的方法
2015/05/12 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
python实现自动登录
2018/09/17 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
Python创建自己的加密货币的示例
2021/03/01 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
优秀团员个人事迹材料
2014/01/29 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
植树造林的宣传标语
2014/06/23 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
公司联欢会主持词
2015/07/04 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python