轮播图宽度自适应，可视区域小于1920时，图片水平居中 web前端

img100%宽度，最小宽度1920，浏览器可视宽度小于1920时让图片水平居中涉及的知识点：jq 获得可视区域宽度：$(window).width()，
jq窗口检测事件：$(window).resize(function(){/*要修改的代码*/})
css部分

*{margin:0; padding:0} img{ vertical-align:middle; } ul{list-style: none} /*banner部分*/ #slider{ position:relative; width:100%; height:590px; /*必须有高度没有的话直接子元素定位top无效*/ } /*ul宽度*/ #imgs{ position:absolute; width:400%; left:0; border: 1px solid #000; } /*:父元素宽度/li的个数*/ #imgs li{ float:left; width:25%; height:590px; position:relative; overflow: hidden; } #imgs li img{ width:100%; min-width:1920px; height:590px; position:absolute; /*小于1920时图片剧中 left:-(1920-窗口宽度)/2 */ }

HTML部分

文章图片文章图片文章图片文章图片

【轮播图宽度自适应，可视区域小于1920时，图片水平居中】js部分

//让图片居中显示 var $imgs=$("#imgs img"); var imgWidth=$("#imgs img:first").width(); function reSize(){ var w=$(window).width(); var left=-((imgWidth-w)/2); if(w<1920){//可视<1920 $imgs.each(function (i,img) { $(this).css({"left":left}); }) } } reSize(); $(window).resize(function(){ var w=$(window).width(); var imgWidth=$("#imgs img:first").width(); if(w>1920){ var left=((imgWidth-w)/2); $imgs.each(function (i,img) { $(this).css({"left":left}); }) } reSize(); })