<!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. 安装centos mini版，无法联网，用yum安装软件提示 cannot find a valid baseurl for repo:base/7/x86_64 的解决方法

    *无法联网的明显表现会有:  cannot find a valid baseurl for repo:base/7/x86_64 1.yum install出现 Error: cannot find ...

  2. 转：pthread_detach()函数

    创建一个线程默认的状态是joinable. 如果一个线程结束运行但没有被join,则它的状态类似于进程中的Zombie Process,即还有一部分资源没有被回收(退出状态码). 所以创建线程者应该调 ...

  3. [布局] bootstrap基本标签总结

    文件头: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl ...

  4. Stream 基础和常用

    来源 : http://www.cnblogs.com/jimmyzheng/archive/2012/03/17/2402814.html 系列 目前只作为个人参考. 微软的 stream 结构老大 ...

  5. uva10003 Cutting Sticks

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  6. ural 1494 Monobilliards

    #include <cstdio> #include <cstring> #include <algorithm> using namespace std; ],b ...

  7. Codeforces Round #300 F - A Heap of Heaps （树状数组 OR 差分）

    F. A Heap of Heaps time limit per test 3 seconds memory limit per test 512 megabytes input standard ...

  8. EXP/IMP的三种模式

    基本语法和实例:     1.EXP:       有三种主要的方式(完全.用户.表)       1.完全:           EXP SYSTEM/MANAGER BUFFER=64000 FI ...

  9. JDBC批量插入数据效率分析

    对于需要批量插入数据库操作JDBC有多重方式,本利从三个角度对Statement和PreparedStatement两种执行方式进行分析,总结较优的方案. 当前实现由如下条件: 执行数据库:Mysql ...

  10. Engineering Economics

    相关简介 工程经济学 –-研究各种技术在使用过程中如何以最小的投入获得预期产出或者说如何以等量的投入获得最大的产出: –-如何用最低的寿命周期成本实现产品.作业以及服务的必要功能. 软件工程经济学 工 ...