<!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. MySQL DBA工作角色和职责介绍

    MySQL DBA分架构DBA,运维DBA和开发DBA三种角色,职责介绍如下:

  2. CentOS7配置MySQL5.7主备

    1:主库设置(1)修改配置文件vi /etc/my.cnf[mysqld]log-bin=master-binserver-id=1 (2)创建用户#mysql -u root -pmysql> ...

  3. Java 基础【19】代理

    Java 代理(Proxy)模式与现实中的代理含义一致,如旅游代理.明星的经纪人. 在目标对象实现基础上,增加额外的功能操作,由此来扩展目标对象的功能. JavaWeb 中最常见的过滤器.Struts ...

  4. BAT 删除隐藏文件

    删除文件 del命令参数说明/F   强制删除文件./S      从所有子目录删除指定文件./Q      安静模式.删除全局通配符时,不要求确认./A      根据属性选择要删除的文件. 删除指 ...

  5. SNF快速开发平台2019-APP移动端实际应用效果

    废话不多说,直接上效果图: 这是我们移动端框架基本程序+组件库+标准业务程序,当然了还需要配合上我们的代码生成器则更如虎添翼.https://www.cnblogs.com/spring_wang/p ...

  6. aiohttp文档翻译-server(一)

    web server 快速入门 运行一个简单的web server 为了实现web server, 首先需要实现request handler 一个 request handler 必须是一个coro ...

  7. XML格式化工具

    做接口开发的时候,往往接受参数或返回值是一个XML的字符串.如下图,不方便辨识 两种方法, 1.将它保存为xxx.xml,然后用浏览器打开.这种方法稍微有些麻烦. 2.使用 UltraEdit 工具

  8. 2018铁三测评题write以及一些想送给你们的话

    一..前言 此文献给实验室的萌新们,以及刚刚接触CTF的同学们,希望能对你们的成长起到一些帮助. 二.关于CTF 可能你已经接触过CTF或者对它有所了解,这里我再简单介绍一下. 1.什么是CTF? C ...

  9. [转]Mybatis foreach 批量操作

    原文地址:https://blog.csdn.net/jason5186/article/details/40896043 foreach属性属性    描述item    循环体中的具体对象.支持属 ...

  10. 物联网系统与CoAP之Hello,World

    物联网系统与CoAP Hello,World 关于CoAP与物联网系统我们在上一篇中(ps:CoAP与物联网系统)中做一个简单的介绍,接着我们便開始试试CoAP协议的应用 CoAP应用 開始之前我们须 ...