网站Bannr适应大小屏幕，图片始终居中不被压缩

网站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 }

 

posted @ 2016-12-30 11:28  haonanElva  阅读(810)  评论(0)  编辑  收藏  举报