mui 轮播
<!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 轮播的更多相关文章
- vue+mui轮播图
mui的轮播图,如果图片是请求来的,直接在html中循环是不会动的. 需要请求完图片之后,在setTimeout方法里,使用slider()方法,这样才会动 而且mui的轮播图,有点坑的,需要重复最后 ...
- mui轮播图
轮播组件是mui提供的一个核心组件,在该核心组件基础上,衍生出了图片轮播.可拖动式图文表格.可拖动式选项卡.左右滑动9宫格等组件,这些组件有较多共同点.Dom构造: <div class=&qu ...
- mui轮播图为什么设置了自动播放参数也不能自动播放呢?
最近在做项目的时候,发现Mui的轮播图遇到个问题,设置了自动播放但是怎么也不能自动播放,这是为什么呢? 原来如果动态给mui的图片轮播添加图片,又使用的ajax获取的数据,但是你ajax 还没有执行完 ...
- 两个页面实现mui轮播图与选项卡结合
index.html页面 <!DOCTYPE html><html><head> <meta charset="utf-8"> &l ...
- mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)
mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...
- MUI组件四:选择器、滚动条、单选框、区域滚动和轮播组件
目录(?)[+] 1.picker(选择器) mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现.*pop ...
- MUI框架-06-静态页制作(图片轮播)
MUI框架-06-静态页制作(图片轮播) 轮播也是静态,是相对页面交互来说 上一篇介绍了如何设计一个简单的界面,还没有接触过,请先查看: MUI框架-01-介绍-创建项目-简单页面 轮播组件 之前也介 ...
- H5如何做手机app(移动Web App)?图片轮播?ionic、MUI
移动Web App 跨平台开发 用户不需要去卖场来下载安装App 任何时候都可以发布App只需要一个开发项目 可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Rub ...
- 》》mui--图片轮播
mui框架内置了图片轮播插件,通过该插件封装的JS API,用户可以设定是否自动轮播及轮播周期,如下为代码示例: //获得slider插件对象 var gallery = mui('.mui-slid ...
随机推荐
- MySQL DBA工作角色和职责介绍
MySQL DBA分架构DBA,运维DBA和开发DBA三种角色,职责介绍如下:
- CentOS7配置MySQL5.7主备
1:主库设置(1)修改配置文件vi /etc/my.cnf[mysqld]log-bin=master-binserver-id=1 (2)创建用户#mysql -u root -pmysql> ...
- Java 基础【19】代理
Java 代理(Proxy)模式与现实中的代理含义一致,如旅游代理.明星的经纪人. 在目标对象实现基础上,增加额外的功能操作,由此来扩展目标对象的功能. JavaWeb 中最常见的过滤器.Struts ...
- BAT 删除隐藏文件
删除文件 del命令参数说明/F 强制删除文件./S 从所有子目录删除指定文件./Q 安静模式.删除全局通配符时,不要求确认./A 根据属性选择要删除的文件. 删除指 ...
- SNF快速开发平台2019-APP移动端实际应用效果
废话不多说,直接上效果图: 这是我们移动端框架基本程序+组件库+标准业务程序,当然了还需要配合上我们的代码生成器则更如虎添翼.https://www.cnblogs.com/spring_wang/p ...
- aiohttp文档翻译-server(一)
web server 快速入门 运行一个简单的web server 为了实现web server, 首先需要实现request handler 一个 request handler 必须是一个coro ...
- XML格式化工具
做接口开发的时候,往往接受参数或返回值是一个XML的字符串.如下图,不方便辨识 两种方法, 1.将它保存为xxx.xml,然后用浏览器打开.这种方法稍微有些麻烦. 2.使用 UltraEdit 工具
- 2018铁三测评题write以及一些想送给你们的话
一..前言 此文献给实验室的萌新们,以及刚刚接触CTF的同学们,希望能对你们的成长起到一些帮助. 二.关于CTF 可能你已经接触过CTF或者对它有所了解,这里我再简单介绍一下. 1.什么是CTF? C ...
- [转]Mybatis foreach 批量操作
原文地址:https://blog.csdn.net/jason5186/article/details/40896043 foreach属性属性 描述item 循环体中的具体对象.支持属 ...
- 物联网系统与CoAP之Hello,World
物联网系统与CoAP Hello,World 关于CoAP与物联网系统我们在上一篇中(ps:CoAP与物联网系统)中做一个简单的介绍,接着我们便開始试试CoAP协议的应用 CoAP应用 開始之前我们须 ...