网站banner一般都是2000px以上的宽度，为了让在小的屏幕上图片不被压缩并且是居中表现：
方法是让包裹图片全部的那个大容器始终正居中
html<!-- banner -->
1 <div id="sy_top"> 2 3 <div class="sy_bigbox"> 4 5 <div id="sy_picbox" class="sy_picbox"> 6 7 <a href="#" target="_blank"> 8 9 <img src="${ctx }/static/img/banner_1209a.jpg"/> 10 11 </a> 12 13 <a href="#" target="_blank"> 14 15 <img src="${ctx }/static/img/banner_1209b.jpg"/> 16 17 </a> 18 19 <a href="#" target="_blank"> 20 21 <img src="${ctx }/static/img/banner_1209c.jpg"/> 22 23 </a> 24 25 </div> 26 27 </div> 28 29 <!-- 都点 --> 30 31 <div id="sy_bigpicbtn" class="sy_bigpicbtn"></div> 32 33 </div>
css写法
1 /*------------------------ banner ------------------------*/ 2 3 .sy_bigbox { 4 5 position: relative; 6 7 width: 100%; 8 9 height: 600px; 10 11 background-color: #f1f1f1; 12 13 overflow: hidden; 14 15 } 16 17 18 19 .sy_picbox { 20 21 position: absolute; 22 23 white-space: nowrap; 24 25 font-size: 0; 26 27 width: 100%; 28 29 left: 50%; 30 31 margin-left: -1000px; 32 33 top: 0px; 34 35 } 36 37 .sy_bigpicbtn { 38 39 position: absolute; 40 41 width: 100px; 42 43 height: 25px; 44 45 top: 690px; 46 47 left: 0px; 48 49 width: 100%; 50 51 text-align: center; 52 53 } 54 55 .sy_bigpicbtn a { 56 57 display: inline-block; 58 59 width: 50px; 60 61 height: 2px; 62 63 background-color: #b2c7cd; 64 65 margin-right: 10px; 66 67 } 68 69 .sy_bigpicbtn a.active { 70 71 background-color: #687477; 72 73 -webkit-animation: dh2 0.7s linear infinite; 74 75 }
js 实现轮播动画
1 var sindex = 0; 2 3 var prewindex = 0; 4 5 var timeindex = setInterval(doscroll, 3000); 6 7 var num = $(".sy_picbox a").length; 8 9 var html = ""; 10 11 for(var i = 0;i<num;i++){ 12 13 html+= '<a id="a'+i+'" href="#" class=""></a>'; 14 15 } 16 17 $('.sy_bigpicbtn').append(html); 18 19 function doscroll() { 20 21 prewindex = sindex; 22 23 if (sindex != $(".sy_picbox a").length - 1) 24 25 sindex++ 26 27 else 28 29 sindex = 0; 30 31 $(".sy_bigpicbtn a").removeClass("active") 32 33 $(".sy_bigpicbtn a").eq(sindex).addClass("active"); 34 35 $(".sy_picbox a").hide(); 36 37 $(".sy_picbox a").eq(sindex).fadeIn(500); 38 39 }