http://www.swiper.com.cn/
http://www.idangero.us/swiper/demos/
解决问题点：
1.先得到图片真实的宽高， 根据真实宽高 等比例
2.调用的控件 宽高的计算 其实是 获取 .swiper-container 样式的宽和高，所以此样式的宽高要设定好。
宽100% 高 则根据 真实图片的 比例来
72 $(".swiper-container").css("height",$(".swiper-container").width()/imageRealWidth*imageRealHeight); 3.再采用cookie 技术 否则每次加载 页面都new Image 从性能角度考虑 更优
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
6 <link rel="stylesheet" type="text/css" href="css/layout.css"/>
7 <!-- Link Swiper‘s CSS -->
8 <link rel="stylesheet" href="css/swiper.min.css">
9 <!-- Demo styles -->
10 <style>
11 html, body {
12 position: relative;
13 height: 100%;
14 }
15 body {
16 background: #eee;
17 font-family: Helvetica Neue, Helvetica, A
18 font-size: 14px;
19 color:#000;
20 margin: 0;
21 padding: 0;
22 }
23 .swiper-container {
24 width: 100%;
25 }
26
27 .swiper-slide {
28 text-align: center;
29 font-size: 18px;
30 background: #fff;
31 /* Center slide text vertically */
32 display: -webkit-box;
33 display: -ms-flexbox;
34 display: -webkit-flex;
35 display: flex;
36 -webkit-box-pack: center;
37 -ms-flex-pack: center;
38 -webkit-justify-content: center;
39 justify-content: center;
40 -webkit-box-align: center;
41 -ms-flex-align: center;
42 -webkit-align-items: center;
43 align-items: center;
44
45 }
46 </style>
47
48 <title>倍赚宝首页</title>
49 <script type="text/javascript" src="js/jquery1.9.1.js""></script>
50 <!-- Swiper JS -->
51 <script src="js/swiper.js"></script>
52
53 <script type="text/javascript" src="js/iscroll.js"></script>
54 <script type="text/javascript" src="js/hybrid-1.0.2.js"></script>
55 <script type="text/javascript" src="js/plugins/WinnerFrame.js"></script>
56 <script type="text/javascript">
57 var leverage={
58 leverageStock:function(){
59 window.plugins.winnerFrame.redirectTrade();
60 },
61 leverageNew:function(){
62 window.plugins.winnerFrame.redirectZijin();
63 }}
64 $(function(){
65 var imageRealWidth,imageRealHeight;
66 imageRealWidth=localStorage[‘imageRealWidth‘];
67 imageRealHeight=localStorage["imageRealHeight"];
68 function callSwiper(){
69 //设置宽高
70 //$(".swiper-container").css("width",localStorage[‘swipercontainerWidth‘]);
71 //$(".swiper-container").css("height",localStorage[‘swipercontainerHeight‘]);
72 $(".swiper-container").css("height",$(".swiper-container").width()/imageRealWidth*imageRealHeight);
73 //alert("w h"+imageRealWidth+" "+imageRealHeight+", swiper-container w h "+$(".swiper-container").width()+" "+$(".swiper-container").height());
74 swiper = new Swiper(‘.swiper-container‘, {
75 pagination: ‘.swiper-pagination‘,
76 paginationClickable: true,
77 spaceBetween: 10,
78 centeredSlides: true,
79 autoplay: 2500,
80 autoplayDisableOnInteraction: false
81 });
82 }
83 if(imageRealWidth==null||imageRealHeight==null){
84 var image=new Image();
85 var swiper;
86 image.src="images/banner01.png";
87 image.onload=function(){
88 imageRealWidth=this.width;
89 imageRealHeight=this.height;
90 localStorage[‘imageRealWidth‘]= imageRealWidth; // 存储 cookie
91 localStorage[‘imageRealHeight‘]= imageRealHeight; // 存储 cookie
92 //存储 container控件宽高
93 localStorage[‘swipercontainerWidth‘]=$(".swiper-container").width();
94 localStorage[‘swipercontainerHeight‘]=$(".swiper-container").height();
95 callSwiper();
96 };
97 delete image;
98 }else{
99 callSwiper();
100 }
101
102 })
103 </script>
104
105 </head>
106
107 <body>
108 <article class="header">
109 <div class="logo"><img src="images/logo.png" width="100" height="34" alt="倍赚宝"/> </div>
110 </article>
111 <!--
112 <div class="banner">
113 <div class="flex-viewport">
114 <!-- 改变 -webkit-transform: translate3d(-100px, 0px, 0px), 改变位置
115 <ul class="slides" style="-webkit-transform: translate3d(0px, 0px, 0px);">
116 <li style="left:0;"><a><img src="images/banner01.png"/></a></li>
117 <li style="left:100%;"><a><img src="images/banner02.png"/></a></li>
118 <li style="left:200%;"><a><img src="images/banner03.png"/></a></li>
119 </ul>
120 </div>
121 </div>
122
123 -->
124 <!-- Swiper -->
125 <div class="swiper-container">
126 <div class="swiper-wrapper">
127 <div class="swiper-slide" style="background:url(‘images/banner01.png‘);background-repeat:no-repeat;background-size:100%;"></div>
128 <div class="swiper-slide" style="background:url(‘images/banner02.png‘);background-repeat:no-repeat;background-size:100%;"></div>
129 <div class="swiper-slide" style="background:url(‘images/banner03.png‘);background-repeat:no-repeat;background-size:100%;"></div>
130 </div>
131 <!-- Add Pagination -->
132 <div class="swiper-pagination"></div>
133
134 </div>
135
136 <article class="content am-grid">
137 <div class="clearfix">
138 <div class="blockButton blockButtoncg" onclick="leverage.leverageStock()">杠杆炒股</div>
139 <div class="blockButton blockButtondx" onclick="leverage.leverageNew()">杠杆打新</div>
140 </div>
141 <p class="whytitle clearfix">
142 <span class="line"></span>
143 <span class="title">为什么选择倍赚宝？</span>
144 <span class="line"></span>
145 </p>
146 <aside class="reasons clearfix">
147 <div class="circle ycircle am-grid-item">
148 <div class="icon"></div>
149 <div class="txt">最高1.8倍杠杆</div>
150 </div>
151 <div class="circle rcircle am-grid-item">
152 <div class="icon"></div>
153
154 <div class="txt">佣金万2.5起</div>
155 </div>
156 <div class="circle bcircle am-grid-item">
157 <div class="icon"></div>
158 <div class="txt">8折利率优惠</div>
159 </div>
160 </aside>
161 </article>
162
163
164
165 </body>
166 </html>
时间： 2024-11-06 07:20:16