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 图片滑动控件实现 任意尺寸适用任意屏幕的更多相关文章

  1. Slider.js轻量级图片播放控件

    Slider.js基于HTML5和CSS3实现的Slideshow 1.Slider.js 是一个图片播放Slideshow引擎,采用jQuery.CSS3和HTML5 canvas技术实现. 2.可 ...

  2. Android实现图片滚动控件，含页签功能，让你的应用像淘宝一样炫起来

    首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了,于是我今天决定怒更一记,纪念我死去的爱机. 如果你是网购达人,你的手机上一定少不了淘宝客户 ...

  3. appium+python：自己写的一个滑动控件的方式

    #调用方式roll_ele("ID","ele_id","7","up",3)#将控件分为7格,从底部倒数第二格向上滑动 ...

  4. Android进阶篇-时间滑动控件

    仿Iphone时间选择滑动控件: WheelView.java: /** * @author Administrator * * 时间滑动滚轮 */ public class WheelView ex ...

  5. Android开发技巧——定制仿微信图片裁剪控件

    拍照--裁剪,或者是选择图片--裁剪,是我们设置头像或上传图片时经常需要的一组操作.上篇讲了Camera的使用,这篇讲一下我对图片裁剪的实现. 背景 下面的需求都来自产品. 裁剪图片要像微信那样,拖动 ...

  6. JS与APP原生控件交互

    "热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显 ...

  7. [js开源组件开发]js多选日期控件

    js多选日期控件 详情请见:http://www.lovewebgames.com/jsmodule/calendar.html 它的github地址:https://github.com/tianx ...

  8. UI-UIImageView的图片填充方式(contentMode)_图片作为控件背景图的拉伸方式(stretch)介绍

    常用图片填充方式 这里只介绍三个最常用的图片填充方式 UIViewContentModeScaleToFill模式会导致图片变形.例如: UIViewContentModeScaleAspectFit ...

  9. js实现图片滑动显示效果

    js实现图片滑动显示效果 今天用户提出一个需求,要实现一个滑动显示新闻列表的效果,具体就是图片新闻自动滑动显示,鼠标移上去就停止滑动,移开就继续滑动:效果如下: 第一:先用HTML和CSS实现显示,主 ...

随机推荐

  1. liunx之：rpm包安装

    使用rpm命令查询软件包: 1.查询系统中安装的所有RPM包 $ rpm -qa 查询当前linux系统中已经安装的软件包. 例:$ rpm -qa | grep -i x11 | head -3 察 ...

  2. 【转】BLE_CC2540_初学者入门指导

    原文网址:http://www.deyisupport.com/question_answer/wireless_connectivity/bluetooth/f/103/t/61462.aspx 看 ...

  3. EDIUS设置自定义输出的方法

    在做后期视频剪辑时,往往根据需求,需要输出不同分辨率格式的视频文件,那在EDIUS中,如何自定义输出设置,使之符合自己的需要呢?下面小编就来详细讲讲EDIUS自定义输出的一二事吧. 当剪辑完影片,设置 ...

  4. 使用SQL Server存储ASP.NET Session变量

    创建和配置ASP.NET Session状态数据库 在基于NLB(网络负载平衡)环境下的ASP.NET Web应用程序开发,我们需要将Session存储在数据库中供多个Web应用程序调用,以下为配置方 ...

  5. poj 1597 Uniform Generator【生成指定范围内所有随机数】

    本文参考资料:http://hi.baidu.com/bnjyjncwbdbjnzr/item/1f997cfdd225d5d143c36a58 题意:一个生成随机数的函数, Seed[x+1] =  ...

  6. wikioi 1076 排序 【这里含冒泡、选择、插入以及快排库函数的调用】

    /*=================================================================== 1076 排序 题目描述 Description 给出n和n ...

  7. windows下android环境的搭建：完成后添加android其他版本

    JDK: jdk-6u10-rc2-bin-b32-windows-i586-p-12_sep_2008.exe Eclipse:Eclipse3.7.1 Android sdk:android-sd ...

  8. 解决PHP 5.6.11中cURL模块问题！

    按照网上的教程写了一个cURL的小例子,在apache环境下执行,一点反应也没有,放在IIS环境里就ok的,感觉问题一定出在动态连接库上,因为配置文件里的php_curl.dll已经打开了,而且在ii ...

  9. eclipse新建web项目，运行后在tomcat安装目录下webapps中没有该项目

    一.发现问题在eclipse中新建Dynamic Web Project,配置好本地的tomcat并写好代码后选择Run on Server,但运行后发现在tomcat的安装目录下的webapps并没 ...

  10. [navicat] Navicat for Oracle Cannot load OCI DLL

    1. 本地安装的是64位的Oracle,但由于Navicat仅支持32位的,因此我们还需下载一个32位的客户端. 2.