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实现显示,主 ...

随机推荐

Android sdk 镜像服务器资源
大连东软信息学院镜像服务器地址:- http://mirrors.neusoft.edu.cn 端口:80北京化工大学镜像服务器地址:- IPv4: http://ubuntu.buct.edu.cn ...
javascript零散要点收集
1.this永远指向函数对象的所有者 2.ECMA-262 把对象(object)定义为“属性的无序集合,每个属性存放一个原始值.对象或函数”.严格来说,这意味着对象是无特定顺序的值的数组. 3.pr ...
C#字符补位
C#字符补位 .byte类型的字符,用5位2进制数表示,右对齐,不足5位,前面补零. byte b; Convert.ToString(b, ).PadLeft(, ') .byte类型的字符,用2位 ...
NLTK中的词性
NOUN n,VERB v ,ADJ a, ADV r, ADJ_SAT s NOUN: [('s', ''), ('ses', 's'), ('ves', 'f'), ('xes', 'x' ...
SVG 箭头线绘制
SVG并没有提供原生的Arrow标签,这就需要自己的组合了,通过marker标签和path标签可以完美的模仿出箭头线,无论需要多少个箭头线,只需引用同一个marker即可: <svg id=&q ...
Java 异常处理机制和集合框架
一.实验目的掌握面向对象程序设计技术二.实验环境 1.微型计算机一台 2.WINDOWS操作系统,Java SDK,Eclipse开发环境三.实验内容 1.Java异常处理机制涉及5个关键字:t ...
ant导入Zookeeper到Eclipse错误path contains invalid character
首先在Zookeeper源码目录执行 ant eclipse 遇到错误 path contains invalid character 可以修改\zookeeper\build.xml 文件加入 &l ...
IDEA快捷键大全
IntelliJ Idea 常用快捷键列表 Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Sh ...
删除Android自带软件方法及adb remount 失败解决方案
删除Android自带软件方法 1.在电脑上打开cmd,然后输入命令 adb remount adb shell su 2.接着就是Linux命令行模式了,输入 cd system/app 3然后输入 ...
[mysql] mysql主从复制(基于日志点)
怎么安装mysql数据库,这里不说了,只说它的主从复制,步骤如下: 1.主从服务器分别作以下操作: 1.1.版本一致 1.2.初始化表,并在后台启动mysql 1.3.修改root的密码 2.修 ...

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

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

随机推荐

热门专题

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

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