基于layui輪播圖滿屏是高度自適應(yīng)的解決方法
更新時(shí)間：2019年09月16日 19:58:24 作者：魚之樂-子焉知
今天小編就為大家分享一篇基于layui輪播圖滿屏是高度自適應(yīng)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
在做官網(wǎng)時(shí)，遇到輪播圖的問題，本來自己寫了個(gè)輪播圖，怎奈有個(gè)問題（當(dāng)我打開頁面后去瀏覽其他頁面，回來首頁后會(huì)有圖片會(huì)來回閃動(dòng)，沒有正確輪播）一直沒有解決。后來看到了layui插件的輪播圖，就拿過來用了，但是圖片高度不會(huì)自適應(yīng)，圖片變形。如圖：
解決辦法：
實(shí)例代碼：
var b = 1920/460;//我的圖片比例
//獲取瀏覽器寬度
var W = $(window).width();
var H = $(window).height();
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造實(shí)例
carousel.render({
elem: '#banner1'
,width: '100%' //設(shè)置容器寬度
,height: (W/b).toString()+"px" //按比例和瀏覽器可視頁面寬度來獲取高度
,arrow: 'always' //始終顯示箭頭
//,anim: 'updown' //切換動(dòng)畫方式
});
});
//窗口變化是重新加載
$(window).resize(function () {
// setBanner();
window.location.reload()
})
以上這篇基于layui輪播圖滿屏是高度自適應(yīng)的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于如何利用JS檢查元素是否在視口內(nèi)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
由于TypeScrip中的類不支持多繼承，所以引入了混合（Mixin）的特性，可以間接實(shí)現(xiàn)多繼承的效果，這篇文章主要介紹了一文弄懂TypeScript中的混合（Mixin）,需要的朋友可以參考下2023-09-09
JavaScript樹形組件實(shí)現(xiàn)無限級(jí)樹形結(jié)構(gòu)
這篇文章主要介紹了JavaScript樹形組件實(shí)現(xiàn)無限級(jí)樹形結(jié)構(gòu)，一種構(gòu)建多級(jí)有序樹形結(jié)構(gòu)JSON（或XML）數(shù)據(jù)源的方法，下面更多相關(guān)資料需要的小伙伴可以參考一下2022-03-03
首先說下背景，該code用于一個(gè)多條件查詢界面，原本該查詢條件由一個(gè)下拉列表提供，但是由于下拉列表數(shù)據(jù)量過大，用戶使用不方便，便希望在頁面給出一個(gè)智能提示的功能，但搜索的數(shù)據(jù)來自下拉列表2009-11-11
對(duì)于JS框架開發(fā)中的客戶端（瀏覽器）兼容難題，各位想必都不陌生。平常，我們都用if去面對(duì)接口不一致以及成堆的bug。然而，這里介紹的方法卻可以讓兼容更加優(yōu)雅。2010-08-08
在使用JavaScript中的Date對(duì)象時(shí)，有一個(gè)常用的操作就是輸出。但Date對(duì)象自帶的toString()方法輸出的格式并不能滿足用戶多樣化的需求。我在想，是不是可以將C#中DateTime.ToString(string format)方法的形式引入到JavaScript中呢？2010-03-03
bootstrap fileinput組件整合Springmvc上傳圖片到本地磁盤
這篇文章主要介紹了bootstrap fileinput組件整合Springmvc上傳圖片到本地磁盤的方法,需要的朋友可以參考下2017-05-05
JavaScript trim 去除字符串空格的三種方法(附代碼詳解)
個(gè)人認(rèn)為最好的方法.采用的是正則表達(dá)式,這是最核心的原理.因?yàn)榭崭裼卸喾N形式。2010-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手寫簽名，簽字版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
javascript結(jié)合canvas實(shí)現(xiàn)圖片旋轉(zhuǎn)效果
圖片的旋轉(zhuǎn)可以說是一種效果，但是逐漸旋轉(zhuǎn)已經(jīng)不單單是屬于視覺效果那個(gè)范疇，其更具有使用性，功能性。照片有時(shí)候是需要橫過來的拍的，當(dāng)我們預(yù)覽或共享到web上時(shí)需要進(jìn)行旋轉(zhuǎn)。這個(gè)操作在以往可能更多的是交給軟件去完成，然后再將旋轉(zhuǎn)到正常角度的圖片發(fā)布到web上。2015-05-05