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

随机推荐

在线音乐API的研究 (Part 2.1)
本文转载于:http://www.cnblogs.com/osmondy/p/LyricApi.html 最近,在优化一个自己写的音乐播放器.主要目的是回顾.归纳,并希望能够写出一个属于自己的comm ...
eclipse常用插件在线安装地址或下载地址
本文转载自:http://my.oschina.net/bloghu/blog/198922 一,反编译插件: A.Jadclipse 1.打开eclipse增加站点:http://jadclipse ...
spring源码学习之【准备】cglib动态代理例子
一:委托者 package com.yeepay.porxy.cglib.test; import java.util.HashMap; import java.util.Map; /** * 目标类 ...
JSBinding + SharpKit / 原理篇：Delegate
以 NGUI 的 UIEventListener 为例: 有一个类: using SharpKit.JavaScript; using UnityEngine; using System.Collec ...
Java-JDBC连接Oracle 数据库
package com.zse.oracle; import oracle.jdbc.*; import java.sql.*; import javax.swing.text.html.HTMLDo ...
MongoDB权限管理之用户名和密码的操作
MongoDB默认是不需要输入用户名和密码,客户就可以登录的.但是出于安全性的考虑,我们还是要为其设置用户名和密码.本文主要介绍的是MongoDB权限管理之用户名和密码的操作,希望能对您有所帮助. 本 ...
ORA-12519, TNS:no appropriate service handler found
解决问题: 有时候连不上数据库是因为连接数到了极限了. select count(*) from v$process --当前的连接数 130 select value from v$paramete ...
html标记语言的标准写法-参考自http://www.zhihu.com/question/20797118/answer/16212312
网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"? 添加评论查看全部 12 个回答 skydiver ,程序员 5 人赞 ...
无需添加引用执行JS，发布无需带DLL、例子：QQMD5 QQGTK 13位时间戳取随机数
javascriptDemo.rar 本人写POST经常会遇到用JS来加密的一些网站,然后又不想用C#重写.在百度和论坛里找的JS执行不是64位不支持就是要带个DLL神马的.很讨厌.然后自己就写了个不 ...
MS CRM 2011的自定义和开发（11）——插件(plugin)开发（四）
http://www.cnblogs.com/StoneGarden/archive/2012/02/08/2343294.html MS CRM 2011的自定义和开发(11)——插件(plugin ...

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

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

随机推荐

热门专题

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

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