网站banner一般都是2000px以上的宽度，为了让在小的屏幕上图片不被压缩并且是居中表现：
方法是让包裹图片全部的那个大容器始终正居中
<!-- banner -->
<div id="sy_top">
<div class="sy_bigbox">
<div id="sy_picbox" class="sy_picbox">
<a href="#" target="_blank">
<img src="${ctx }/static/img/banner_1209a.jpg"/>
</a>
<a href="#" target="_blank">
<img src="${ctx }/static/img/banner_1209b.jpg"/>
</a>
<a href="#" target="_blank">
<img src="${ctx }/static/img/banner_1209c.jpg"/>
</a>
</div>
</div>
<!-- 都点 -->
<div id="sy_bigpicbtn" class="sy_bigpicbtn"></div>
</div>
css写法
/*------------------------ banner ------------------------*/
.sy_bigbox {
position: relative;
width: 100%;
height: 600px;
background-color: #f1f1f1;
overflow: hidden;
}
.sy_picbox {
position: absolute;
white-space: nowrap;
font-size: 0;
width: 100%;
left: 50%;
margin-left: -1000px;
top: 0px;
}
.sy_bigpicbtn {
position: absolute;
width: 100px;
height: 25px;
top: 690px;
left: 0px;
width: 100%;
text-align: center;
}
.sy_bigpicbtn a {
display: inline-block;
width: 50px;
height: 2px;
background-color: #b2c7cd;
margin-right: 10px;
}
.sy_bigpicbtn a.active {
background-color: #687477;
-webkit-animation: dh2 0.7s linear infinite;
}
js 实现轮播动画
var sindex = 0;
var prewindex = 0;
var timeindex = setInterval(doscroll, 3000);
var num = $(".sy_picbox a").length;
var html = "";
for(var i = 0;i<num;i++){
html+= '<a id="a'+i+'" href="#" class=""></a>';
}
$('.sy_bigpicbtn').append(html);
function doscroll() {
prewindex = sindex;
if (sindex != $(".sy_picbox a").length - 1)
sindex++
else
sindex = 0;
$(".sy_bigpicbtn a").removeClass("active")
$(".sy_bigpicbtn a").eq(sindex).addClass("active");
$(".sy_picbox a").hide();
$(".sy_picbox a").eq(sindex).fadeIn(500);
}