<!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. Facebook和Google如何激发工程师的创造力

    http://taiwen.lofter.com/post/664ff_ad8a15 今天终于“朝圣”了两个伟大的公司——Facebook和Google,对创造力和驱动力的来源有了更多的理解,尤其是对 ...

  2. 【原创】CLEVO P157SM外接鼠标键盘失灵解决：更换硅脂（附带最新跑分数据）

    作者批注:本文允许转载,并且希望给搜索未来人类.蓝天.CLEVO.更换硅脂或者任何有关关键字的朋友提供帮助. 原文地址:http://www.cnblogs.com/c4isr/p/3514140.h ...

  3. 一个正整数N,拆成任意个正整数之和,怎样使这些数的乘积最大

    网上看到了如标题所示的题目,就开始想如果用程序来算的话,那么它的算法是怎样的. 自己想了半天,第一感觉要用递归, 如先算出 当 n=1 max=1 当 n=2 max=1 当 n=3 max=2 .. ...

  4. RAILS ON

    我是按照下面这个URL来轻快安装的. http://lxiaodao.iteye.com/blog/1579992 (1)RVM官方网站应该是改版过一次, 使用 curl -L https://get ...

  5. MSSQL 生成有意义的PROC

    MSSQL 生成有意义的PROC --MSSQL  用PROC 生成有意义的单号:如WP200011101 GO/****** 对象:  Table [dbo].[tbl_SequenceNum]   ...

  6. codevs1044：dilworth定理

    http://www.cnblogs.com/submarine/archive/2011/08/03/2126423.html dilworth定理的介绍 题目大意:求一个序列的lds 同时找出这个 ...

  7. HDU5125--magic balls（LIS）

    题意:求a数组的LIS,但是加了一个条件,为了LIS最大 b[i] a[i]可以交换.最多交换mci: 赤果果的dp啊,可是这个题用线段树的话却会TLE,,由于查询的只是1-x的最大值 因此我们可以用 ...

  8. WC2015流水账

    THU那四场考试没考好,只有20+名.这也许是我OI生涯中最后一场吧(已确认是最后一场),真是感慨万千. day0 搬进浙大宿舍404房间(神房间号),四个人一间.中午发现学军伙食相当良心,是我参加的 ...

  9. iperf网络测试工具

    iperf https://sourceforge.net/projects/iperf/ http://downloads.es.net/pub/iperf/ https://github.com/ ...

  10. socket实例2

    第二个实例创建一个java工程,基于tomcat服务器,程序运行时会启动客户端,实现了一个客户端向其他的客户端发送即时信息的功能 MainWindow.java package com.jikexue ...