<!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. Effective Go -> Interface

    1.接口实现及类型转换 type Sequence []int // Methods required by sort.Interface. func (s Sequence) Len() int { ...

  2. Sum square difference

    简单: e sum of the squares of the first ten natural numbers is, 12 + 22 + ... + 102 = 385 The square o ...

  3. 基于 USB 传输的针式打印机驱动程序开发

    1．引言 针式打印机曾经在相当长的一段时间占据打印机市场的主导地位,但是近年来由于喷墨.激光等非击打式打印机的冲击,针式打印机的市场份额逐年下降.即便如此,由于针式打印机在票据打印领域的不可取代性,同 ...

  4. android中使用PopupWindow实现弹出窗口菜单

    结合上篇android中使用ViewPager实现图片拖动,我们实现了点击“帮助”按钮的功能,这一篇则是接着上一篇,让我们一起来完成“我的”按钮的功能,这一功能,则是使用PopupWindow来实现弹 ...

  5. mysql System Tablespace

    System Tablespace 数据文件配置: mysql> show variables like '%innodb_data_file_path%'; +---------------- ...

  6. sdl2.0示例

    // gcc -o testDrone2_video testDrone2_video.c -lavcodec -lavformat -lswscale -lSDL2// g++ -o testDro ...

  7. Android手机音量的控制

    1.AudioManager audio=(AudioManager) super.getSystemService(Context.AUDIO_SERVICE);//获得手机的声音服务 //设置加音 ...

  8. （2015多校第6场）HDU5361--In Touch （Dijkstra应用）

    In Touch Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total ...

  9. Hadoop生态圈技术图谱

    当下Hadoop已经成长为一个庞大的体系,貌似只要和海量数据相关的,没有哪个领域缺少Hadoop的身影,下面是一个Hadoop生态系统的图谱,详细的列举了在Hadoop这个生态系统中出现的各种数据工具 ...

  10. Java设计模式之简单工厂、工厂方法和抽象工厂

    在前面的学习中(参见前面的博客),我们学到了很多OO原则: 封装变化 多用组合,少用继承 针对接口/超类编程,不针对实现编程 松耦合 开闭原则 让我们从一个简单的类开始,看看如何将之改造成符合OO原则 ...