H5如何做手机app(移动Web App)?图片轮播（）

丈夫欲遂平生志，一载寒窗一举汤。这篇文章主要讲述H5如何做手机app(移动Web App)?图片轮播？相关的知识，希望能为你提供帮助。
移动Web App
跨平台开发
用户不需要去卖场来下载安装App
任何时候都可以发布App
只需要一个开发项目
可以使用html5,CSS3以及javascript以及服务器端语言来完成（php,Ruby on Rails,python）

1 MUI-轻量APP框架快速体验Quickly get up and running with a mui app.
1. 下载Hello mui App
点击下载已打包好的Hello mui 手机app，直接在手机上体验mui的控件UI及能力展示；
2. 创建Hello mui工程
可从https://www.dcloud.io下载Hbuilder，选择新建“移动APP”，并选择“Hello MUI”工程模板，创建工程；然后通过数据线将手机连接上电脑，点击运行，就可以在手机上体验MUI的各项能力。
【H5如何做手机app(移动Web App)?图片轮播（）】

文章图片

3. mui帮助文档
可从MUI帮助文档http://dev.dcloud.net.cn/mui/ui/ ——了解该框架的使用方法。

文章图片

2 手机APP中事件监听在手机APP中，事件绑定推荐使用DOM2模型。用tap事件取代click事件。事件绑定除了可以使用addEventListener()方法监听某个特定元素上的事件外，也可以使用.on()方法实现批量元素的事件绑定。
事件取消使用on()方法绑定事件后，若希望取消绑定，则可以使用off()方法。 off()方法根据传入参数的不同，有不同的实现逻辑。
事件触发使用mui.trigger()方法可以动态触发特定DOM元素上的事件。

3 手机APP中的图片轮播

< !doctype html> < html> < head> < meta charset="UTF-8"> < title> < /title> < meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> < link href="https://www.songbingjia.com/android/css/mui.min.css" rel="stylesheet" /> < link href="https://www.songbingjia.com/android/css/comment.css" rel="stylesheet" /> < style type="text/css"> .mui-slider-item{ width: 100%; height: 300px; background-color: red; } .mui-slider-title{ background-color: rgba(255,0,0,0.7); color: green; } < /style> < /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"> 图片轮播组件< /h1> < /header> < !--轮播组件--> < div class="mui-content"> < div class="mui-slider"> < div class="mui-slider-group"> < div class="mui-slider-item"> 第一个轮播组件 < /div> < div class="mui-slider-item"> 第二个轮播组件 < /div> < /div> < /div> < !--不支持循环图片轮播--> < div class="mui-slider"> < div class="mui-slider-group"> < div class="mui-slider-item"> < a href="https://www.songbingjia.com/android/#"> < img src="https://www.songbingjia.com/android/img/cbd.jpg" /> < /a> < !--给当前新闻添加标题--> < p class="mui-slider-title"> 这是一个新闻的标题< /p> < /div> < div class="mui-slider-item"> < a href="https://www.songbingjia.com/android/#"> < img src="https://www.songbingjia.com/android/img/muwu.jpg" /> < /a> < /div> < div class="mui-slider-item"> < a href="https://www.songbingjia.com/android/#"> < img src="https://www.songbingjia.com/android/img/shuijiao.jpg" /> < /a> < /div> < div class="mui-slider-item"> < a href="https://www.songbingjia.com/android/#"> < img src="https://www.songbingjia.com/android/img/yuantiao.jpg" /> < /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 class="mui-indicator"> < /div> < /div> < /div> < !--支持循环的图片轮播--> < div id="slider" class="mui-slider" > < div class="mui-slider-group mui-slider-loop"> < !-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) --> < div class="mui-slider-item mui-slider-item-duplicate"> < a href="https://www.songbingjia.com/android/#"> < img src="https://www.songbingjia.com/android/img/yuantiao.jpg"> < /a> < /div> < !-- 第一张 --> < div class="mui-slider-item"> < a href="https://www.songbingjia.com/android/#"> < img src="https://www.songbingjia.com/android/img/cbd.jpg"> < /a> < /div> < !-- 第二张 --> < div class="mui-slider-item"> < a href="https://www.songbingjia.com/android/#"> < img src="https://www.songbingjia.com/android/img/muwu.jpg"> < /a> < /div> < !-- 第三张 --> < div class="mui-slider-item"> < a href="https://www.songbingjia.com/android/#"> < img src="https://www.songbingjia.com/android/img/shuijiao.jpg"> < /a> < /div> < !-- 第四张 --> < div class="mui-slider-item"> < a href="https://www.songbingjia.com/android/#"> < img src="https://www.songbingjia.com/android/img/yuantiao.jpg"> < /a> < /div> < !-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) --> < div class="mui-slider-item mui-slider-item-duplicate"> < a href="https://www.songbingjia.com/android/#"> < img src="https://www.songbingjia.com/android/img/cbd.jpg"> < /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 class="mui-indicator"> < /div> < /div> < /div> < button id="btn"> 点击我调到第三张< /button> < /div> < script src="https://www.songbingjia.com/android/js/mui.min.js"> < /script> < script type="text/javascript"> mui.init()//获得slider插件对象 var gallery = mui(‘#slider‘); gallery.slider({ interval:5000//自动轮播周期，若为0则不自动播放，默认为0； }); //mui自带的事件绑定,只能用事件委派的方式 mui(".mui-content").on("tap","#btn",function(){ gallery.slider().gotoItem(2); }); < /script> < /body> < /html>