码迷,mamicode.com
首页 > Web开发 > 详细

js swipe 图片滑动控件实现 任意尺寸适用任意屏幕

时间:2015-06-17 11:13:46      阅读:369      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

js swipe 图片滑动控件实现 任意尺寸适用任意屏幕

标签:

原文地址:http://www.cnblogs.com/friends-wf/p/4582624.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!