基于layui輪播圖滿屏是高度自適應(yīng)的解決方法
在做官網(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)文章
JS實(shí)現(xiàn)PC手機(jī)端和嵌入式滑動(dòng)拼圖驗(yàn)證碼三種效果
這篇文章主要介紹了JS實(shí)現(xiàn)PC手機(jī)端和嵌入式滑動(dòng)拼圖驗(yàn)證碼三種效果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
JavaScript的常見兼容問題及相關(guān)解決方法(chrome/IE/firefox)
本篇文章只要是對(duì)JavaScript的常見兼容問題及相關(guān)解決方法(chrome/IE/firefox)進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12
Javascript?中AJAX的圖書管理代碼實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了AJAX的圖書管理代碼實(shí)例,使用數(shù)據(jù)庫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02
JavaScript高級(jí)程序設(shè)計(jì)閱讀筆記(六) ECMAScript中的運(yùn)算符(二)
ECMAScript中的運(yùn)算符,學(xué)習(xí)js的朋友可以參考下2012-02-02
echarts圖表設(shè)置寬度100%結(jié)果為100px的解決辦法
在開發(fā)一個(gè)前端項(xiàng)目時(shí)需要用到Element-ui的el-tabs組件和Echart開源庫,當(dāng)兩者嵌套使用時(shí),我給Echart中的圖表寬度設(shè)置為了100%,但是實(shí)際的寬度卻只有100px,這篇文章主要給大家介紹了關(guān)于echarts圖表設(shè)置寬度100%結(jié)果為100px的解決辦法,需要的朋友可以參考下2022-12-12
Javascript 多物體運(yùn)動(dòng)的實(shí)現(xiàn)
這篇文章主要介紹了Javascript 多物體運(yùn)動(dòng)的實(shí)現(xiàn),需要的朋友可以參考下2014-12-12
JavaScript數(shù)字?jǐn)?shù)組的13個(gè)實(shí)用小技巧
數(shù)組是JS最常見的一種數(shù)據(jù)結(jié)構(gòu),咱們?cè)陂_發(fā)中也經(jīng)常用到,在這篇文章中,提供一些小技巧,幫助咱們提高開發(fā)效率,這篇文章主要給大家分享介紹了關(guān)于JavaScript數(shù)字?jǐn)?shù)組的13個(gè)實(shí)用小技巧,需要的朋友可以參考下2023-11-11

