MUI学习03-滚动图(幻灯片)及菜单项(九宫格)
<!--标准mui.css-->
引入CSS:<link rel="stylesheet" href="../css/mui.min.css">
HTML代码如下:
<!--滚动图(幻灯片)-->
<div class="mui-slider ">
<div class="mui-slider-group mui-slider-loop">
<!--支持循环,需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../images/nynav03.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/nynav01.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/nynav02.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/nynav03.jpg" /></a></div>
<!--支持循环,需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../images/nynav01.jpg" /></a></div>
</div>
</div>
JS代码如下:
<script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
interval:5000//自动轮播周期,若为0则不自动播放,默认为0;
});
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
效果图如下:
MUI学习03-滚动图(幻灯片)及菜单项(九宫格)的更多相关文章
- “焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”仅需一个SuperSlidev2.1
官网:http://www.superslide2.com/index.html 1. 标签切换 / 书签切换 / 默认效果 2. 焦点图 / 幻灯片 3. 图片滚动-左 4. 图片滚动-上 5. 图 ...
- Android学习笔记之如何使用圆形菜单实现旋转效果...
PS:最近忙于项目的开发,一直都没有去写博客,是时候整理整理自己在其中学到的东西了... 学习内容: 1.使用圆形菜单并实现旋转效果.. Android的圆形菜单我也是最近才接触到,由于在界面 ...
- mui学习
改变状态栏的颜色 <meta name="apple-mobile-web-app-capable" content="yes"> <me ...
- 基于jQuery的网站首页宽屏焦点图幻灯片
今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- Windows phone 8 学习笔记(5) 图块与通知
原文:Windows phone 8 学习笔记(5) 图块与通知 基于metro风格的Windows phone 8 应用提到了图块的概念,它就是指启动菜单中的快速启动图标.一般一个应用必须有一个默认 ...
- iOS学习笔记20-地图(二)MapKit框架
一.地图开发介绍 从iOS6.0开始地图数据不再由谷歌驱动,而是改用自家地图,当然在国内它的数据是由高德地图提供的. 在iOS中进行地图开发主要有三种方式: 利用MapKit框架进行地图开发,利用这种 ...
- JavaScript学习03 JS函数
JavaScript学习03 JS函数 函数就是包裹在花括号中的代码块,前面使用了关键词function: function functionName() { 这里是要执行的代码 } 函数参数 函数的 ...
- Java虚拟机JVM学习03 连接过程:验证、准备、解析
Java虚拟机JVM学习03 连接过程:验证.准备.解析 类被加载后,就进入连接阶段. 连接就是将已经读入到内存的类的二进制数据合并到虚拟机的运行时环境中去. 连接阶段三个步骤:验证.准备和解析. 类 ...
- Java学习03
Java学习03 1.java面试一些问题 一.什么是变量 变量是指在程序执行期间可变的数据.类中的变量是用来表示累的属性的,在编程过程中,可以对变量的值进行修改.变量通常是可变的,即值是变化的 二. ...
随机推荐
- SP3734 PERIODNI - Periodni
题解: 第一道笛卡尔树dp 会发现以一个点为分界 如果左边大于它右边大于它 那么大于的那部分是相互不影响的 于是我们对序列建立笛卡尔树 满足父亲节点的v<儿子节点的v 然后这棵树的中序遍历为原序 ...
- 1.RN环境搭建,创建项目,使用夜神模拟调试
1.环境搭建(Yarn.React Native 的命令行工具(react-native-cli)) npm install -g yarn react-native-cli 具体参考 参见官方(中文 ...
- python全栈开发day98-DRF
1.CBV源码流程 2.restful协议 1 所有的数据,不过是通过网络获取的还是操作(增删改查)的数据,都是资源,将一切数据视为资源是REST区别与其他架构风格的最本质属性 2 面向资源架构(RO ...
- arcgis 10 File GDB转成9.3 File GDB
背景:已有的File GDB数据是在ArcGIS 10下面创建的,在运行9.3的电脑上无法读取,需要转换成低版本. 方法: 1.在ArcGIS Toolbox中找到相关工具(datamanagemen ...
- Python_copy_深浅拷贝
对于数字和字符串来说,无论是‘’赋值‘’还是‘’深拷贝‘’还是‘’浅拷贝‘’都是指向的同一个地址 深浅拷贝是copy类下的方法,创建方式为 import copy copy.copy() #浅拷贝 c ...
- 2018牛客网暑假ACM多校训练赛(第五场)H subseq 树状数组
原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round5-H.html 题目传送门 - https://www.no ...
- 020100——00002_OS库
OS 库中文文档:https://yiyibooks.cn/xx/python_352/library/os.html OS 库英文文档:https://docs.python.org/3/libra ...
- objectmapper使用
https://www.cnblogs.com/liam1994/p/5629356.html
- HDU 1796 How many integers can you find 【容斥】
<题目链接> 题目大意: 给你m个数,其中可能含有0,问有多少小于n的正数能整除这个m个数中的某一个. 解题分析: 容斥水题,直接对这m个数(除0以外)及其组合的倍数在[1,n)中的个数即 ...
- BZOJ-4-2038: [2009国家集训队]小Z的袜子(hose)-莫队
思路 :分块 思想 处理离线查询操作 对查询进行排序 在同一块内的按照 r 进行排序 不同块 的按照 L进行排序. #include<bits/stdc++.h> using names ...