<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>手机轮播图</title>

    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"/>

    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport"/>

    <!-- 轮播图js -->

    <script type="text/javascript" src="http://files.cnblogs.com/xinlinux/iscroll.js"></script>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

</head>

<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 + ) + ')').className = 'active';

            }

        });

    }

    document.addEventListener('DOMContentLoaded', loaded, false);

</script>

<!-- 轮播图样式 -->

<style>

    body{margin:0px;}

    header{text-align:center;   position:relative;      overflow:hidden;}

    ul{ margin:0px; padding:0px;list-style: none;}

    #nav{ position:absolute; width:%; height:20px; line-height:20px;   bottom:0px;}

    #nav{ float:left; margin-right:%; opacity:;} 

    #nav ul li{ float:left; background:#fff; border-radius:10px; width:10px; height:10px; margin-left:10px; margin-top:5px; opacity:0.5;}

    #nav ul li.active{ background:#fff;opacity:;}

    .banner img{width:%;}

    .banner ul li{ float:left;}

</style>

<body>

    <div class="row-fluid">

        <header>

            <div class="banner">

                <div id="wrapper" style="overflow: hidden; ">

                    <div id="scroller">

                        <ul id="thelist">

                            <li>

                                <a href="#"><img src="data:images/1.jpg" /></a>

                            </li>

                            <li>

                            <a href="#"><img src="data:images/2.jpg" /></a>

                            </li>  

                            <li>

                                <a href="#"><img src="data:images/3.jpg" /></a>

                            </li> 

                        </ul>

                    </div>

                </div>

            </div>

            <div id="nav">

                <div id="prev" onclick="javascript:myScroll.scrollToPage('prev', 0);"></div>

                <ul id="indicator">

                    <li class="active"></li>

                    <li ></li>      

                    <li ></li>  

                </ul>

                <div id="next" onclick="javascript:myScroll.scrollToPage('next', 0, 400, 2);"></div>

            </div>

            <div class="clr"></div>

        </header>

    </div>

    <script>

        var count = document.getElementById("thelist").getElementsByTagName("img").length;

        for (i = ; i < count; i++) {

            document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:" + document.body.clientWidth + "px";

        }

        document.getElementById("scroller").style.cssText = " width:" + document.body.clientWidth * count + "px";

        setInterval(function() {

            myScroll.scrollToPage('next', , , count);

        }, );

        window.onresize = function() {

            for (i = ; i < count; i++) {

                document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:" + document.body.clientWidth + "px";

            }

            document.getElementById("scroller").style.cssText = " width:" + document.body.clientWidth * count + "px";

        };

    </script>

</body>

</html>

App轮播图的更多相关文章

  1. Vue(小案例_vue+axios仿手机app)_首页（底部导航栏+轮播图+九宫格）

    ---恢复内容开始--- 一.前言                        1.底部导航(两种做法)                                         2.轮播图 ...

  2. 利用axure软件实现app中的轮播图功能

    1.首先在axure软件中插入一张手机模型图片并调整为合适大小 2.在需要展示轮播图片位置拖入[动态面板]并且调整大小 拖入后双击动态面板,填入面板名称,并且添加面板状态(此处轮播图为三张,所以有三个 ...

  3. vue移动音乐app开发学习（三）：轮播图组件的开发

    本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...

  4. 一步一步拆解一个简单的iOS轮播图（三图）

    导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...

  5. 初识 swift 封装轮播图

    一.简介 换了一家公司.换了一个环境刚开始来公司自然不能有一丝一毫的放松,每天即使是没有什么工作也是看看这个博客.那个源码.尽量让自己更充实.慢慢的开始写几篇博客记录下自己遇到的一些问题和解决方法.其 ...

  6. photoSlider-原生js移动开发轮播图、相册滑动插件

    详细内容请点击 在线预览   立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...

  7. photoSlider-html5原生js移动开发轮播图-相册滑动插件

    简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...

  8. iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  9. React Native学习（六）—— 轮播图

    本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...

随机推荐

  1. Set的并集

    public static void main(String[] args) { Set<Long> old = new HashSet<>(); for (int i = 0 ...

  2. Http请求工具实例编写

    HTTP协议工作方式首先客户端发送一个请求(request)给服务器,服务器在接收到这个请求后将生成一个响应(response)返回给客户端.在这个通信的过程中HTTP协议在以下4个方面做了规定:1. ...

  3. C++中关于函数的引用

    这一块知识最常见的疑问就是: #include <iostream> #include <cstring> using namespace std; int a[50]; in ...

  4. APP纯黑盒测试---某些可以试试的操作

    一.多次快速点击一处功能入口: 该测试方法可以在某些应用中打开俩次目标界面,举一些具体一点的例子: 1.比如现在很多APP需要登陆,如果打开了俩次登录页面,就容易造成登录成功后应用跳转界面又是登录界面 ...

  5. C程序设计语言--指针和引用的区别

    在看了一篇文章以后,http://coolshell.cn/articles/7992.html,说的是C和C++之间的缺陷,当然这篇文章说的非常高深了.所以就找了一些资料,分析了这两者的区别 在&l ...

  6. 秒杀多线程第八篇 经典线程同步 信号量Semaphore

    阅读本篇之前推荐阅读以下姊妹篇: <秒杀多线程第四篇一个经典的多线程同步问题> <且不超过最大资源数量. 第三个參数能够用来传出先前的资源计数,设为NULL表示不须要传出. 注意:当 ...

  7. Swift补基础之Selector、条件编译、编译标记、NSObject

    在swift中使用条件编译比较直接 #if <condition> #elseif <condition> #else #endif 例如 :在debug模式和release模 ...

  8. Android的深度定制版阿里云os（Android的山寨）

    阿里云OS(YunOS)是阿里巴巴集团的智能手机操作系统,依托于阿里巴巴集团电子商务领域积累的经验和强大的云计算平台,基于LINUX开发. 魅族4阿里yun OS版已上市.[1] 1简介 阿 里云OS ...

  9. FIR滤波器设计

    FIR滤波器的优越性: 相位对应为严格的线性,不存在延迟失真,仅仅有固定的时间延迟: 因为不存在稳定性问题,设计相对简单: 仅仅包括实数算法,不涉及复数算法,不须要递推运算,长度为M,阶数为M-1,计 ...

  10. Ubuntu Wpa wifi connection

    最近做一个项目,需要做一个WIFI连接模块,这几天都在折腾,终于,今天终于是连上网络了,只不过连网的过程有点慢,还有一些缺点,先写下来以备忘记. 1.环境建立: sudo apt-get instal ...