二话不说，直接上图，看效果

需要使用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">&larr; 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 &rarr;</div>-->

</div>

</body>

</html>

代码示例包

点击下载

声明：本博客高度重视知识产权保护，发现本博客发布的信息包含有侵犯其著作权的链接内容时，请联系我，我将第一时间做相应处理,联系邮箱ffgign@qq.com。

作者：Mark Fan (小念头)    来源：http://cube.cnblogs.com
说明：未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。如有疑问，可以通过 ffgign@qq.com 联系作者，本文章采用 知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可

跨平台移动开发 手机上使用Iscroll.Js的Banner的更多相关文章

  1. 如何在 Android 安卓手机上运行 Node.js 应用 ｜ 如何在安卓手机配置node开发环境

    最近在学习js,由于没法随身携带笔记本电脑,在手机翻阅<JavaScript高级程序设计>时,时常想调试一下书中的代码.于是就有了,能否在手机上配置一个js开发环境.考虑到手机上的Chro ...

  2. 利用exif.js解决ios手机上传竖拍照片旋转90度问题

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...

  3. 引用iScroll.js实现上拉和下拖刷新

    使用技巧 1.引用iScroll.js, 在初始化时添加两个事件监听:touchMove.DOMContentLoaded. 2.实现iScroll插件的onScrollEnd事件, 也就是在这个事件 ...

  4. zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  5. 关于在eclipse开发环境上打开手机data文件

    使用Eclipse开发Android上的数据库应用,需要把数据库文件放到/data/data/mynamespace/database文件夹下,普通手机通过ROOT后经常还是看不到这个文件夹,这时需要 ...

  6. ios 给微信开发一个插件并安装到未越狱的手机上教程

    现来整体说一下思路,首先给越狱的手机开发一个插件并安装上去,然后去越狱手机上找到相应的动态库和对应的微信APP安装包,拷贝出来,然后重新签名,就可以安装到未越狱的手机上了 1.首先你的电脑需要安装th ...

  7. 利用exif.js解决手机上传竖拍照片旋转90\180\270度问题

    原文:https://blog.csdn.net/linlzk/article/details/48652635/ html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针 ...

  8. 利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...

  9. 解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题

    博客已迁移至http://zlwis.me. 使用过iscroll.js的上拉下拉刷新效果的朋友应该都碰到过这个问题:在iOS的浏览器中,上拉或下拉刷新时,当手指划出屏幕后,页面无法弹回.很多人因为解 ...

随机推荐

  1. LeetCode 递归（Recursion） 培训专题 讲解文章翻译 （附链接）

     递归 - 时间复杂度 在本文中, 我们主要介绍如何分析递归算法程序中的时间复杂度.. 在一个递归程序中, 它的时间复杂度 O(T) 一般来说就是他总共递归调用的次数 (定义为 R) 以及每次调用时所 ...

  2. Servlet 调试

    测试/调试 Servlet 始终是开发使用过程中的难点.Servlet 往往涉及大量的客户端/服务器交互,可能会出现错误但又难以重现. 这里有一些提示和建议,可以帮助您调试. System.out.p ...

  3. go语言发送邮件

    package main import ( "fmt" "net/smtp" "strings" ) //发送邮件的逻辑函数 func Se ...

  4. linux中使用vi 打开文件时，能显示行号

    方法一: 1.显示当前行行号,在VI的命令模式下输入 :nu 2.显示所有行号,在VI的命令模式下输入     :set nu方法二: 使用vi编辑~/.vimrc文件,在该文件中加入一行" ...

  5. sedna进行xquery查询

    有一个文件book.xml: <books> <book> <name>The Call Of Wild</name> <author>Ja ...

  6. [Spring Framework]学习笔记－－Dependency injection(DI)

    1. 通过构造函数实现DI 简单类型实例 package examples; public class ExampleBean { // Number of years to calculate th ...

  7. 【BZOJ2044】三维导弹拦截 DP+（有上下界的）网络流

    [BZOJ2044]三维导弹拦截 Description 一场战争正在A国与B国之间如火如荼的展开. B国凭借其强大的经济实力开发出了无数的远程攻击导弹,B国的领导人希望,通过这些导弹直接毁灭A国的指 ...

  8. Android输入法的显示与隐藏

    显示输入法: public void ShowSoftInput(View v) { // v 接受输入的控件 mInputMethodManager = (InputMethodManager) ( ...

  9. EasyNVR支持的摄像机、NVR设备接入类型以及关于国标设备是否支持接入EasyNVR无插件流媒体服务器

    背景分析: 随着互联直播的发展,EasyNVR也是顺应时代潮流顺势发展,也是越来越受广大客户的欢迎. 主要是因为EasyNVR可以完美的摆脱网络的限制,可以实现互联网级别的直播分发和录像回看,特别是对 ...

  10. Intellij IDEA工具的常用快捷键

    掌握如下常用快捷键可以使自己的开发效率提供十倍. ctrl + B : 转到类或者方法的定义 ctrl + Alt + B:弹出接口/虚类的实现类/子类 ctrl + Alt + 左箭头/右箭头 : ...