基于layui輪播圖滿屏是高度自適應的解決方法
更新時間：2019年09月16日 19:58:24 作者：魚之樂-子焉知
今天小編就為大家分享一篇基于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輪播圖滿屏是高度自適應的解決方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于如何利用JS檢查元素是否在視口內的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
由于TypeScrip中的類不支持多繼承，所以引入了混合（Mixin）的特性，可以間接實現(xiàn)多繼承的效果，這篇文章主要介紹了一文弄懂TypeScript中的混合（Mixin）,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了JavaScript樹形組件實現(xiàn)無限級樹形結構，一種構建多級有序樹形結構JSON（或XML）數(shù)據(jù)源的方法，下面更多相關資料需要的小伙伴可以參考一下2022-03-03
首先說下背景，該code用于一個多條件查詢界面，原本該查詢條件由一個下拉列表提供，但是由于下拉列表數(shù)據(jù)量過大，用戶使用不方便，便希望在頁面給出一個智能提示的功能，但搜索的數(shù)據(jù)來自下拉列表2009-11-11
對于JS框架開發(fā)中的客戶端（瀏覽器）兼容難題，各位想必都不陌生。平常，我們都用if去面對接口不一致以及成堆的bug。然而，這里介紹的方法卻可以讓兼容更加優(yōu)雅。2010-08-08
在使用JavaScript中的Date對象時，有一個常用的操作就是輸出。但Date對象自帶的toString()方法輸出的格式并不能滿足用戶多樣化的需求。我在想，是不是可以將C#中DateTime.ToString(string format)方法的形式引入到JavaScript中呢？2010-03-03
bootstrap fileinput組件整合Springmvc上傳圖片到本地磁盤
這篇文章主要介紹了bootstrap fileinput組件整合Springmvc上傳圖片到本地磁盤的方法,需要的朋友可以參考下2017-05-05
JavaScript trim 去除字符串空格的三種方法(附代碼詳解)
個人認為最好的方法.采用的是正則表達式,這是最核心的原理.因為空格有多種形式。2010-05-05
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)手寫簽名，簽字版，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
javascript結合canvas實現(xiàn)圖片旋轉效果
圖片的旋轉可以說是一種效果，但是逐漸旋轉已經不單單是屬于視覺效果那個范疇，其更具有使用性，功能性。照片有時候是需要橫過來的拍的，當我們預覽或共享到web上時需要進行旋轉。這個操作在以往可能更多的是交給軟件去完成，然后再將旋轉到正常角度的圖片發(fā)布到web上。2015-05-05