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 从性能角度考虑 更优

 <!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>

js swipe 图片滑动控件实现任意尺寸适用任意屏幕的更多相关文章

Slider.js轻量级图片播放控件
Slider.js基于HTML5和CSS3实现的Slideshow 1.Slider.js 是一个图片播放Slideshow引擎,采用jQuery.CSS3和HTML5 canvas技术实现. 2.可 ...
Android实现图片滚动控件，含页签功能，让你的应用像淘宝一样炫起来
首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了,于是我今天决定怒更一记,纪念我死去的爱机. 如果你是网购达人,你的手机上一定少不了淘宝客户 ...
appium+python：自己写的一个滑动控件的方式
#调用方式roll_ele("ID","ele_id","7","up",3)#将控件分为7格,从底部倒数第二格向上滑动 ...
Android进阶篇-时间滑动控件
仿Iphone时间选择滑动控件: WheelView.java: /** * @author Administrator * * 时间滑动滚轮 */ public class WheelView ex ...
Android开发技巧——定制仿微信图片裁剪控件
拍照--裁剪,或者是选择图片--裁剪,是我们设置头像或上传图片时经常需要的一组操作.上篇讲了Camera的使用,这篇讲一下我对图片裁剪的实现. 背景下面的需求都来自产品. 裁剪图片要像微信那样,拖动 ...
JS与APP原生控件交互
"热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显 ...
[js开源组件开发]js多选日期控件
js多选日期控件详情请见:http://www.lovewebgames.com/jsmodule/calendar.html 它的github地址:https://github.com/tianx ...
UI-UIImageView的图片填充方式(contentMode)_图片作为控件背景图的拉伸方式(stretch)介绍
常用图片填充方式这里只介绍三个最常用的图片填充方式 UIViewContentModeScaleToFill模式会导致图片变形.例如: UIViewContentModeScaleAspectFit ...
js实现图片滑动显示效果
js实现图片滑动显示效果今天用户提出一个需求,要实现一个滑动显示新闻列表的效果,具体就是图片新闻自动滑动显示,鼠标移上去就停止滑动,移开就继续滑动:效果如下: 第一:先用HTML和CSS实现显示,主 ...

随机推荐

vb6中webbrowser控件树转换备忘
Dim doc As HTMLDocument Set doc = WebBrowser1.Document Dim inputs As IHTMLElementCollection Set inpu ...
一个PHP数组能占多大内存
最近用PHP读取一个大文件把相关数据存放到数组中,之后处理并输出, 读取过程中发现占用内存很大, 于是很好奇这个问题. 简单的写一个代码 <?php $m1 = memory_get_usage ...
PorterDuff.Mode error
Android PorterDuff.Mode error: PorterDuff cannot be resolved to a variable Answers: Add this t ...
nginx http跳转到https
server { listen 80; server_name www.888.com; location / { #index.html放在虚拟主机监听的根目录下 root /usr/local/n ...
webqq协议请求交互过程
1.http://my.oschina.net/ij2ee/blog/191692 2.http://www.qqxieyi.com/fenxi_show.asp?id=34
.NET中的Timer类型用法详解
这篇文章主要介绍了.NET中的Timer类型用法,较为详细的分析了Timer类型在各种环境下的用法,需要的朋友可以参考下在.NET FrameWork中有多个Timer,那么怎么根据实际情况进行 ...
C# MDI 子窗体被父窗体控件挡住
using System.Runtime.InteropServices; [DllImport("user32")] public static extern int SetPa ...
MS CRM 2011的自定义和开发（11）——插件(plugin)开发（四）
http://www.cnblogs.com/StoneGarden/archive/2012/02/08/2343294.html MS CRM 2011的自定义和开发(11)——插件(plugin ...
jQuery实现文字放大效果
实现效果:当鼠标移动到超链接的那一瞬间就出现提示. <!DOCTYPE html> <html> <head> <meta charset="UTF ...
修改tcp内核参数：somaxconn
修改somaxconn 该内核参数默认值一般是128(定义了系统中每一个端口最大的监听队列的长度),对于负载很大的服务程序来说大大的不够.一般会将它修改为2048或者更大. echo 2048 > ...

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

js swipe 图片滑动控件实现 任意尺寸适用任意屏幕的更多相关文章

随机推荐

热门专题

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

js swipe 图片滑动控件实现任意尺寸适用任意屏幕的更多相关文章