跨平台移动开发 手机上使用Iscroll.Js的Banner
二话不说,直接上图,看效果
需要使用Iscroll
<script src="content/scripts/iscroll.js"></script>
示例代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll demo: Carousel</title> <script src="content/scripts/iscroll.js"></script> <script type="text/javascript">
var myScroll; function loaded() {
myScroll = new iScroll('wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
onScrollEnd: function () {
document.querySelector('#indicator > li.active').className = '';
document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
}
});
} document.addEventListener('DOMContentLoaded', loaded, false);
</script> <style type="text/css" media="all">
#wrapper {
width:300px;
height:160px;
float:left;
position:relative; /* On older OS versions "position" and "z-index" must be defined, */
z-index:1; /* it seems that recent webkit is less picky and works anyway. */
overflow:hidden; /*background:#aaa;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
background:#e3e3e3; */
} #scroller {
width:2100px;
height:100%;
float:left;
padding:0;
} #scroller ul {
list-style:none;
display:block;
float:left;
width:100%;
height:100%;
padding:0;
margin:0;
text-align:left;
} #scroller li {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
display:block; float:left;
width:300px; height:160px;
text-align:center;
font-family:georgia;
font-size:18px;
line-height:140%;
} #nav {
width:300px;
padding:0px 0px 0px 80px;
margin:1px 2px 3px 4px; } #prev, #next {
float:left;
font-weight:bold;
font-size:14px;
padding:5px 0;
width:80px;
} #next {
float:right;
text-align:right;
} #indicator, #indicator > li {
display:block; float:left;
list-style:none;
padding:0; margin:0;
} #indicator {
width:110px;
padding:0px 0 0 30px;
margin:-16px 2px 3px 4px;
position:relative; /* On older OS versions "position" and "z-index" must be defined, */
z-index:2; /* it seems that recent webkit is less picky and works anyway. */
overflow:hidden;
} #indicator > li {
text-indent:-9999em;
width:8px; height:8px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
background:#ddd;
overflow:hidden;
margin-right:4px;
} #indicator > li.active {
background:#888;
} #indicator > li:last-child {
margin:0;
} </style>
</head>
<body>
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
<li><img style="width: 280px;height: 160px;" src="content/images/slides/leaf.jpg"></li>
<li><img style="width: 280px;height: 160px;" src="content/images/slides/road.jpg"></li>
<li><img style="width: 280px;height: 160px;" src="content/images/slides/sea.jpg"></li>
<li><img style="width: 280px;height: 160px;" src="content/images/slides/shelter.jpg"></li>
<li><img style="width: 280px;height: 160px;" src="content/images/slides/tree.jpg"></li>
<li><img style="width: 280px;height: 160px;" src="content/images/slides/bridge.jpg"></li>
<li><img style="width: 280px;height: 160px;" src="content/images/slides/big_bunny_fake.jpg"></li>
</ul>
</div> </div>
<div id="nav">
<!--<div id="prev" onClick="myScroll.scrollToPage('prev', 0);return false">← prev</div>-->
<ul id="indicator">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<!--<div id="next" onClick="myScroll.scrollToPage('next', 0);return false">next →</div>-->
</div>
</body>
</html>
代码示例包
声明:本博客高度重视知识产权保护,发现本博客发布的信息包含有侵犯其著作权的链接内容时,请联系我,我将第一时间做相应处理,联系邮箱ffgign@qq.com。
作者:Mark Fan (小念头) 来源:http://cube.cnblogs.com
说明:未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。如有疑问,可以通过 ffgign@qq.com 联系作者,本文章采用 知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可
跨平台移动开发 手机上使用Iscroll.Js的Banner的更多相关文章
- 如何在 Android 安卓手机上运行 Node.js 应用 | 如何在安卓手机配置node开发环境
最近在学习js,由于没法随身携带笔记本电脑,在手机翻阅<JavaScript高级程序设计>时,时常想调试一下书中的代码.于是就有了,能否在手机上配置一个js开发环境.考虑到手机上的Chro ...
- 利用exif.js解决ios手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
- 引用iScroll.js实现上拉和下拖刷新
使用技巧 1.引用iScroll.js, 在初始化时添加两个事件监听:touchMove.DOMContentLoaded. 2.实现iScroll插件的onScrollEnd事件, 也就是在这个事件 ...
- zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- 关于在eclipse开发环境上打开手机data文件
使用Eclipse开发Android上的数据库应用,需要把数据库文件放到/data/data/mynamespace/database文件夹下,普通手机通过ROOT后经常还是看不到这个文件夹,这时需要 ...
- ios 给微信开发一个插件并安装到未越狱的手机上教程
现来整体说一下思路,首先给越狱的手机开发一个插件并安装上去,然后去越狱手机上找到相应的动态库和对应的微信APP安装包,拷贝出来,然后重新签名,就可以安装到未越狱的手机上了 1.首先你的电脑需要安装th ...
- 利用exif.js解决手机上传竖拍照片旋转90\180\270度问题
原文:https://blog.csdn.net/linlzk/article/details/48652635/ html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针 ...
- 利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
- 解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题
博客已迁移至http://zlwis.me. 使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回.很多人因为解 ...
随机推荐
- htmt 5 素材
http://www.html5code.net/plus/list.php?tid=20
- 关于在Java中链接SQLServer数据库中失败的原因分析
首先声明:笔者是Java的初学者,并且一值是走在自学的道路上,长久以来只有“度娘”相伴.(加入了各种Java学习群,基本没有热心帮人解决问题的.可以理解-_-!!!)大神级的人物就不必看拙文了,没有什 ...
- MySQL的limit子句
1.理解: limit用来取结果集中的固定几条记录 2.参数: limit offset,pagesize offset:偏移量,为0时,可以省略 pagesize:每页显示的行数,通常是固定的 0表 ...
- Ajax工作原理及实例
1.关于ajax的名字 ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. 2. ...
- XML 文档的结构
XML 文档的组成 一个XML文档由两部分构成:第一部分是文档序言,第二部分是文档元素(节点). 1.文档序言 文档序言通常位于XML文档的顶端,根元素之前出现,它是一个特定的包含XML 文档设定信息 ...
- 带参数的main函数
带参数的main函数 int main(int argc,char **argv) 或int main(int argc,char *argv[]) /*解析 依据<C程序设计语言(第二版. ...
- svn 更新文件冲突,提示中文乱码解决
问题描述: update 操作提示错误信息,中文乱码 和 “Please execute the 'Cleanup' command.” Cleanup 操作报错: 解决办法: 1. 工具下载(sql ...
- 关于angularjs的复选框选中
最近在做复选框,业务人员要求选中一块区域里的任何一个适合,复选框呈现选中状态,然而,我的复选框是ng-repeat出来的,刚开始我想用directive指令,但是不知道为什么,我一旦设置了$(this ...
- JavaScript处理数据完成左侧二级菜单的搭建
我们在项目中应用的后台管理框架基本上都是大同小异,左侧是一个二级菜单,点击选中的菜单,右侧对应的页面展示.我把前端页面封装数据的过程整理了一下,虽然不一定适合所有的管理页面,仅作为案例来参考,只是希望 ...
- ubuntu1.4搭建zookeeper3.5.2分布式集群
1.下载 官网链接:http://mirrors.hust.edu.cn/apache/zookeeper/zookeeper-3.5.2-alpha/zookeeper-3.5.2-alpha.ta ...