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实现显示,主 ...
随机推荐
- Qt事件和信号的区别 .
仔细来看,事件与信号其实并无多大差别,从我们对其需求上来说,都只要能注册事件或信号响应函数,在事件或信号产生时能够被通知到即可.但有一项区别在于,事件处理函数的返回值是有意义的,我们要根据这个返回值来 ...
- 11g新特性与12c新特性
1. 11g新特性概图 管理新特性> 开发新特性> 2. 12c 新特性概图
- 安装pgadmin3
在centos/redhat/系统是x86_64 1.下载适合自己系统的合适的版本http://dl.fedoraproject.org/pub/epel/6/x86_64/ ( yum instal ...
- iframe中子页面通过js计算高度（使得页面不会显示不全）
使用过iframe的人,都知道,它是一个模版,里面有一个iframe,而iframe当中,是可以嵌套多个页面的.(比较常见的问题,就是iframe页面中,经常会出现内容显示不全的时候). 谨记,通过j ...
- 【转】ASP.NET数据库连接字符串总结
来源:http://blog.csdn.net/lutinghuan/article/details/5973897 ASP.NET数据库连接字符串总结 一.使用OleDbConnection对象连接 ...
- OpenJudge计算概论-计算书费
/*============================================== 计算书费 总时间限制: 1000ms 内存限制: 65536kB 描述 下面是一个图书的单价表: 计算 ...
- 使用面向对象思想处理cookie
实例:使用面向对象思想处理cookie如果读者对cookie 不熟悉,可以在第七章学习它的使用方法,虽然在那里创建了几个通用函数用于cookie 的处理,但这些函数彼此分离,没有体现出是一个整体.联想 ...
- Android 程式开发：（十三）特殊碎片 —— 13.2 DialogFragment
Android 程式开发:(十三)特殊碎片 —— 13.2 DialogFragment 原文地址 我们也可以创建另外一种碎片——DialogFragment.顾名思义,DialogFragment就 ...
- Spring入门学习（一）
SpringMVC基础平台补充(2016.03.03) 如果想要开发SpringMVC,那么前期依次安装好:JDK(jdk-8u74-windows-x64,安装后配置环境变量JAVA_HOME和CL ...
- 【linux】windows和linux编码相互转换
windows-->linux:dos2unix file linux-->windows:unix2dos file