<!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. 【centos6.6环境搭建】Github unable to access SSL connect error出错处理

    问题 克隆github项目出现SSL connect error git clone https://github.com/creationix/nvm Cloning into 'nvm'... f ...

  2. 【Zend Studio】在Zend Studio中调试ThinkPhp框架

    在这篇文章中,笔者将会展示如何在Zend Studio下进行断点调试Think PHP.环境:windows 7.wampServer 3.1.4 64bit.zend studio 13.6.1Th ...

  3. 记一次spring boot参数初始化的问题

    背景:接手一个项目,看到一个配置参数的引用: @Value("${webSocket.id}") 再看看配置application.yml: ... webSocket: id: ...

  4. 阿里云oss缩略图如何产生读取 超简单 不看后悔(转)

    OSS是使用通过URL尾部的参数指定图片的缩放大小 图片路径后面拼接如下路径: ?x-oss-process=image/[处理类型],x_100,y_50[宽高等参数] ?x-oss-process ...

  5. Spring Boot项目的接口防刷

    说明:使用了注解的方式进行对接口防刷的功能,非常高大上,本文章仅供参考 一,技术要点:springboot的基本知识,redis基本操作, 首先是写一个注解类: import java.lang.an ...

  6. vue2.0引入现有css文件

    1.在vue文件中的<style>内填写需要引用的文件 如: @import "./css/indexTest.css";

  7. C#访问gsoap的服务

    C++开发一个webservice,然后C#开发客户端,这样就需要C#的客户端访问gsoap的服务端.(大家都知道gsoap是C/C++开发webservice的最佳利器) 为什么不考虑直接用wcf开 ...

  8. 【转】WPF Template模版之DataTemplate与ControlTemplate（一）

    WPF系统不但支持传统的Winfrom编程的用户界面和用户体验设计,更支持使用专门的设计工具Blend进行专业设计,同时还推出了以模板为核心的新一代设计理念. 1. 模板的内涵 作为表现形式,每个控件 ...

  9. JDK中Unsafe类详解

    Java中Unsafe类详解 在openjdk8下看Unsafe源码 浅析Java中的原子操作 Java并发编程之LockSupport http://hg.openjdk.java.net/jdk7 ...

  10. 移动网页广告引入mraid.js使用指南

    在网上找mraid相关资料,相对比较少,大多都是API介绍,概念介绍等,没有一份详细的移动端网页广告使用教程,经过自己两天的摸索,完成了开发的移动端网页版的广告加入mraid功能. 背景: 我开发了移 ...