<!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. Xposed 框架 hook 简介 原理 案例 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  2. ViewPager Fragment 懒加载 可见 总结 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  3. Java程序猿怎样高速理解Kubernetes

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/M2l0ZgSsVc7r69eFdTj/article/details/82892167 https: ...

  4. Hadoop+HBase 集群搭建

    Hadoop+HBase 集群搭建 1. 环境准备 说明:本次集群搭建使用系统版本Centos 7.5 ,软件版本 V3.1.1. 1.1 配置说明 本次集群搭建共三台机器,具体说明下: 主机名 IP ...

  5. iOS/MAC 数据压缩与解压缩及常用算法 LZMA、ZLIB

    苹果提供的常用的数据压缩算法LZMA.ZLIB.LZ4等: 这三种算法也是苹果建议的,可跨平台使用: 定义如下: /* Commonly-available encoders */ COMPRESSI ...

  6. 虚拟主机连接FTP发送"AUTH TLS"命令后提示“无法连接到服务器”

    https://help.aliyun.com/knowledge_detail/36417.html?spm=5176.11065259.1996646101.searchclickresult.7 ...

  7. 发现2017年最好的CSS框架

    如今,无数的框架出现在定期而少数人喜欢自助,Foundation和angular.js主宰了整个世界的发展.CSS代表用于描述HTML(或XML)文档表示的样式表语言.一个框架被定义为一个包,它由一组 ...

  8. Android Studio集成到Genymotion模拟器

    环境:Mac Android Studio 一.下载Android Studio 下载地址:http://www.android-studio.org/ 这个的安装没啥好说的了,基本的. 二.下载Ge ...

  9. Python中的string模块的学习

    代码为主,相信有python基础的都能看懂: ? [python] view plain copy >>> import string   >>> string.a ...

  10. [HDFS Manual] CH7 ViewFS Guide

    ViewFS Guide ViewFS Guide 1 介绍 2. The Old World(Prior to Federation) 2.1单个Namenode Clusters 2.2 路径使用 ...