轮播的上一张和下一张怎么设置,轮播的左右箭头怎样显示出来

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部分

<div id="slider"> <ul id="imgs"> <li><img src="images/banner_01.jpg" alt=""></li> <li><img src="images/banner_02.jpg" alt=""></li> <li><img src="images/banner_03.jpg" alt=""></li> <li><img src="images/banner_04.jpg" alt=""></li> </ul></div>

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(); })