<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

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

    <title></title>

    <script src="js/mui.min.js"></script>

    <link href="css/mui.min.css" rel="stylesheet"/>

    <script type="text/javascript" charset="utf-8">

          mui.init();

    </script>

</head>

<body>

<header class="mui-bar mui-bar-nav">

    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

    <h1 class="mui-title">hello</h1>

</header>

    <!--需要轮播可轮训滑动的话 必须加上class="mui-slider-item-duplicate"  并且还要把最后一个轮播图多复制出来一条放到第一个上，再把第一个轮播图复制出来放到最后-->

<div class="mui-content">

    <div class="mui-slider">

        <div class="mui-slider-group mui-slider-loop">

            <div class="mui-slider-item mui-slider-item-duplicate">

                <a href="#"><div style="height: 10px;margin-top: 11px;">3</div><img src="imgs/banner1.png"/></a>

            </div>

            <div class="mui-slider-item">

                <a href="#"><div style="height: 7px; margin-top: 11px;">1</div><img src="imgs/banner1.png"/></a>

            </div>

            <div class="mui-slider-item">

                <a href="#"><div style="height: 7px;margin-top: 11px;">2</div><img src="imgs/banner1.png"/></a>

            </div>

            <div class="mui-slider-item">

                <a href="#"><div style="height: 10px;margin-top: 11px;">3</div><img src="imgs/banner1.png"/></a>

            </div>

            <div class="mui-slider-item mui-slider-item-duplicate">

                <a href="#"><div style="height: 7px; margin-top: 11px;">1</div><img src="imgs/banner1.png"/></a>

            </div>

        </div>

        <div class="mui-slider-indicator">

            <div class="mui-indicator mui-active"></div>

            <div class="mui-indicator"></div>

            <div class="mui-indicator"></div>

        </div>

    </div>

    <button type="button" onClick="changeTo(2)">切换到3个项目</button>

</div>

</body>

<script type="text/javascript">

    /*mui.plusReady(function(){}) 加上此方法只会在真机上有效果*/

        //获取slider 插件对象

        var gellery = mui('.mui-slider');

            gellery.slider({

                interval: 5000//自动轮播周期，若为0则不自动播放，默认为0；

            })

    //切换到第几个项目

    function changeTo(index){

        var slider = mui('.mui-slider');

            slider.slider().gotoItem(index);

    }

</script>

</html>

mui 轮播的更多相关文章

  1. vue+mui轮播图

    mui的轮播图,如果图片是请求来的,直接在html中循环是不会动的. 需要请求完图片之后,在setTimeout方法里,使用slider()方法,这样才会动 而且mui的轮播图,有点坑的,需要重复最后 ...

  2. mui轮播图

    轮播组件是mui提供的一个核心组件,在该核心组件基础上,衍生出了图片轮播.可拖动式图文表格.可拖动式选项卡.左右滑动9宫格等组件,这些组件有较多共同点.Dom构造: <div class=&qu ...

  3. mui轮播图为什么设置了自动播放参数也不能自动播放呢？

    最近在做项目的时候,发现Mui的轮播图遇到个问题,设置了自动播放但是怎么也不能自动播放,这是为什么呢? 原来如果动态给mui的图片轮播添加图片,又使用的ajax获取的数据,但是你ajax 还没有执行完 ...

  4. 两个页面实现mui轮播图与选项卡结合

    index.html页面 <!DOCTYPE html><html><head> <meta charset="utf-8"> &l ...

  5. mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)

    mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...

  6. MUI组件四：选择器、滚动条、单选框、区域滚动和轮播组件

    目录(?)[+]   1.picker(选择器) mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现.*pop ...

  7. MUI框架-06-静态页制作（图片轮播）

    MUI框架-06-静态页制作(图片轮播) 轮播也是静态,是相对页面交互来说 上一篇介绍了如何设计一个简单的界面,还没有接触过,请先查看: MUI框架-01-介绍-创建项目-简单页面 轮播组件 之前也介 ...

  8. H5如何做手机app(移动Web App)?图片轮播？ionic、MUI

    移动Web App 跨平台开发 用户不需要去卖场来下载安装App 任何时候都可以发布App只需要一个开发项目 可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Rub ...

  9. 》》mui--图片轮播

    mui框架内置了图片轮播插件,通过该插件封装的JS API,用户可以设定是否自动轮播及轮播周期,如下为代码示例: //获得slider插件对象 var gallery = mui('.mui-slid ...

随机推荐

  1. Linux系统中如何查找大文件或文件夹的方法

    在Windows系统中,我们可以使用TreeSize工具查找一些大文件或文件夹,非常的方便高效,在Linux系统中,如何去搜索一些比较大的文件呢?下面我整理了一下在Linux系统中如何查找大文件或文件 ...

  2. mysql存储过程实例,查询多参数赋值

    drop procedure if exists p_for_create_customer; create procedure p_for_create_customer()begin declar ...

  3. grid - 网格轨道对齐方式

    网格轨道对齐可以相对于网格容器行和列轴. align-content指定网格轨道沿着行轴对齐方式:justify-content指定网格轨道沿着列轴对齐方式.它们支持下面属性: normal star ...

  4. 修改Linux用户配置之后先验证再退出

    在服务器上更改完zsh.SSH连接属性.用户密码之后,我们可能想退出重新登录查看是否配置生效.这时,有一个注意事项:不要关闭旧窗口,而是重新打开一个新窗口尝试登录.否则,如果配置改错了,自己就再也没有 ...

  5. Sql Server 增加字段、修改字段、修改类型、修改默认值（转）

    转:http://www.cnblogs.com/pangpanghuan/p/6432331.html Sql Server 增加字段.修改字段.修改类型.修改默认值 1.修改字段名: alter ...

  6. class<T>和 class<?>类型

    ? 表示不确定的java类型. T 表示java类型 Class<T>在实例化的时候,T要替换成具体类Class<?>它是个通配泛型,?可以代表任何类型<? extend ...

  7. jQuery(三) javascript跨域问题(JSONP解决)

    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...

  8. 【iCore1S 双核心板_ARM】例程十九：SD_IAP_ARM实验——更新升级STM32

    实验现象及操作说明: 1.本例程共有两个代码包,APP和IAP,IAP程序功能实现将APP程序升级至STM32中. 2.直接上电或烧写程序将执行升级的APP应用程序. 3.按下按键上电或写程序将进行升 ...

  9. [Linux]linux下取消用户名和密码直接登录

    假定目前只有root用户,则有如下两种方式可直接登录系统: 方式一: 1. passwd -d root 2. 修改/lib/systemd/system/serial-getty\@.service ...

  10. [Java并发编程（五）] Java volatile 的实现原理

    [Java并发编程(五)] Java volatile 的实现原理 简介 在多线程并发编程中 synchronized 和 volatile 都扮演着重要的角色,volatile 是轻量级的 sync ...