html轮播图小屏不居中显示,如何实现不同尺寸通屏轮播图的居中显示？

网页制作过程中少不了轮播图的使用，为了使banner图在不同分辨率的屏幕上都能通屏显示，我们会把banner图做成2000像素的宽度。

一般将banner写成如下结构：

• 
• 
• 

为了让banner图左右居中显示，我们可以给

那么，为了解决这种情况的发生，我们采用另一种更为合适的方法。这需要将banner写成如下结构：

利用背景图的方式将图片嵌入，通过设置背景图片居中就可以简单解决，同时需要注意的是必须给包含该背景属性的

加宽高属性，否则背景图片将无法正常显示。给上述

.banner{ height:490px;}

.banner li{ height:490px; width:100%; position:absolute; top:223px;}

.banner .ctrl{ position:absolute; top:690px; left:50%;}

.banner .ctrl p{ width:8px; height:8px; border-radius:50%; border:1px solid black; float:left; margin-right:7px;}

.banner .ctrl .cur{ width:10px; height:10px; border:none; background-color:#00ad3e;}

以上样式属性的高度值、定位中的top值、控制按钮的样式等可根据实际情况自行修改。另外，我们要引入一个在线的开放的js函数库开做切换效果，引入语句如下：

要真正实现轮播效果，还需要以下语句：

$(".banner li").hide().first().show();

$(".banner .ctrl p").first().addClass("cur");

var n=0; //存储轮播图的索引值

function change(){ //定义循环播放的函数

n++;

if(n>3) n=0; //当图片显示到最后一张时，从头开始

$(".banner li").fadeOut(1000).eq(n).fadeIn(1000);//当前要显示的图片渐显，其他图片渐隐

$(".banner .ctrl p").removeClass("cur").eq(n).addClass("cur"); //当前控制块高亮，其他控制块复原

}

var timer=setInterval(change,5000); //设置图片切换速度为每5秒切换一次

$(".banner .ctrl p").mouseenter( //定义鼠标移入控制块进行的操作

function(){

n=$(this).index();

clearInterval(timer); //清除定时

$(this).addClass("cur").siblings().removeClass("cur"); //当前控制块高亮，其他控制块复原

$(".banner li").fadeOut(1000).eq(n).fadeIn(1000);

}

).mouseleave( //定义鼠标移出控制块进行的操作

function(){

timer=setInterval(change,5000); //开启定时

}

);