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 从性能角度考虑 更优 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, A
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
} .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center; }
</style> <title>倍赚宝首页</title>
<script type="text/javascript" src="js/jquery1.9.1.js""></script>
<!-- Swiper JS -->
<script src="js/swiper.js"></script> <script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/hybrid-1.0.2.js"></script>
<script type="text/javascript" src="js/plugins/WinnerFrame.js"></script>
<script type="text/javascript">
var leverage={
leverageStock:function(){
window.plugins.winnerFrame.redirectTrade();
},
leverageNew:function(){
window.plugins.winnerFrame.redirectZijin();
}}
$(function(){
var imageRealWidth,imageRealHeight;
imageRealWidth=localStorage['imageRealWidth'];
imageRealHeight=localStorage["imageRealHeight"];
function callSwiper(){
//设置宽高
//$(".swiper-container").css("width",localStorage['swipercontainerWidth']);
//$(".swiper-container").css("height",localStorage['swipercontainerHeight']);
$(".swiper-container").css("height",$(".swiper-container").width()/imageRealWidth*imageRealHeight);
//alert("w h"+imageRealWidth+" "+imageRealHeight+", swiper-container w h "+$(".swiper-container").width()+" "+$(".swiper-container").height());
swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 10,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
}
if(imageRealWidth==null||imageRealHeight==null){
var image=new Image();
var swiper;
image.src="data:images/banner01.png";
image.onload=function(){
imageRealWidth=this.width;
imageRealHeight=this.height;
localStorage['imageRealWidth']= imageRealWidth; // 存储 cookie
localStorage['imageRealHeight']= imageRealHeight; // 存储 cookie
//存储 container控件宽高
localStorage['swipercontainerWidth']=$(".swiper-container").width();
localStorage['swipercontainerHeight']=$(".swiper-container").height();
callSwiper();
};
delete image;
}else{
callSwiper();
} })
</script> </head> <body>
<article class="header">
<div class="logo"><img src="data:images/logo.png" width="100" height="34" alt="logo"/> </div>
</article>
<!--
<div class="banner">
<div class="flex-viewport">
<!-- 改变 -webkit-transform: translate3d(-100px, 0px, 0px), 改变位置
<ul class="slides" style="-webkit-transform: translate3d(0px, 0px, 0px);">
<li style="left:0;"><a><img src="data:images/banner01.png"/></a></li>
<li style="left:100%;"><a><img src="data:images/banner02.png"/></a></li>
<li style="left:200%;"><a><img src="data:images/banner03.png"/></a></li>
</ul>
</div>
</div> -->
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background:url('images/banner01.png');background-repeat:no-repeat;background-size:100%;"></div>
<div class="swiper-slide" style="background:url('images/banner02.png');background-repeat:no-repeat;background-size:100%;"></div>
<div class="swiper-slide" style="background:url('images/banner03.png');background-repeat:no-repeat;background-size:100%;"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div> </div> <article class="content am-grid">
<div class="clearfix">
<div class="blockButton blockButtoncg" onclick="leverage.leverageStock()">leverageStock</div>
<div class="blockButton blockButtondx" onclick="leverage.leverageNew()">leverageNew</div>
</div>
<p class="whytitle clearfix">
<span class="line"></span>
<span class="title">why choose this</span>
<span class="line"></span>
</p>
<aside class="reasons clearfix">
<div class="circle ycircle am-grid-item">
<div class="icon"></div>
<div class="txt">the maximum 1.8</div>
</div>
<div class="circle rcircle am-grid-item">
<div class="icon"></div> <div class="txt">above 2.5 w</div>
</div>
<div class="circle bcircle am-grid-item">
<div class="icon"></div>
<div class="txt">8 percentage</div>
</div>
</aside>
</article> </body>
</html>