随笔 - 395  文章 - 3  评论 - 49  阅读 - 85万

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

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="logo"/> </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()">leverageStock</div>
139         <div class="blockButton blockButtondx" onclick="leverage.leverageNew()">leverageNew</div>
140     </div>
141     <p class="whytitle clearfix">
142         <span class="line"></span>
143         <span class="title">why choose this</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">the maximum 1.8</div>
150         </div>
151         <div class="circle rcircle am-grid-item">
152             <div class="icon"></div>
153 
154             <div class="txt">above 2.5 w</div>
155         </div>
156         <div class="circle bcircle am-grid-item">
157             <div class="icon"></div>
158             <div class="txt">8 percentage</div>
159         </div>
160     </aside>
161 </article>
162 
163 
164 
165 </body>
166 </html>
复制代码

 

posted on   wf110  阅读(1245)  评论(3)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
历史上的今天：
2014-06-17 oracle存储大文本clob、blob
2014-06-17 jdbc调用 oracle 存储过程操作
2014-06-17 oracle 存储过程 ，触发器练习
2014-06-17 oracle 事务多表查询以及额外的用处
2014-06-17 oracle 查询 函数练习2
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

Powered by: 博客园 Copyright © 2025 wf110
Powered by .NET 9.0 on Kubernetes
点击右上角即可分享
微信分享提示
SQL AI 助手