<!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. 从汇编来看c语言之指针

    一.基础研究 将下面的程序编译连接,用debug加载: 首先执行第一条语句: 发现p=(unsigned char *)0x1000;在这里是把1000赋给一个偏移地址为01af.大小为两字节的内存空 ...

  2. SQL Server 与 Entity Framework 级联删除

    SQL Server 级联设置我就不多说了,网上很多教程. 我想提的是 cycles or multiple cascade paths 的问题. 简单的说如果你的级联设置不是一个树型,而是一个带有循 ...

  3. Cracking the coding interview--Q1.2

    原文 Implement a function void reverse(char* str) in C or C++ which reverses a null-terminated string. ...

  4. css实现居中的各种方法

    css垂直居中有很多种方法,可以参考下这个网站

  5. [LeetCode] 128. Longest Consecutive Sequence 解题思路

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...

  6. 好吧，使用sql实现Dijkstra算法

    我本来不想做这么蛋疼的事情的,可是更蛋疼的是我看了王大神的博客然后中毒了!我发誓再!不!看!了!不过问题本身还是有一点意思的,正好学过图论没有实现过dijkstra,刚好在慕课上又学了一点pl/sql ...

  7. Linux内核数据包的发送传输

    本文主要讲解了Linux内核数据包的传输流程,使用的内核的版本是2.6.32.27 为了方便理解,本文采用整体流程图加伪代码的方式从内核高层面上梳理了二层数据包发送传输的流程,希望可以对大家有所帮助. ...

  8. 解析了grid2008的代码

    import java.io.IOException; import java.util.ArrayList; import java.util.HashMap; import java.util.L ...

  9. Android中theme.xml与style.xml的区别

    一.相同点 两者的定义相同.继承方式也相同 <?xml version="1.0" encoding="utf-8"?> <resources ...

  10. selenium page object model

    Page Object Model (POM) & Page Factory in Selenium: Ultimate Guide 来源:http://www.guru99.com/page ...