MUI 混合开发 轮播图应用
来源:互联网 发布:始作俑者其乎后的意思 编辑:程序博客网 时间:2024/06/18 04:27
MUI 混合开发 轮播图应用
在MUI api中轮播代码
<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="#"> <img src="http://placehold.it/400x300"> </a> </div> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> </a> </div> <!--支持循环,需要重复图片节点--> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="http://placehold.it/400x300"> </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>
上面的代码可以看出在mui中无缝循环轮播的机制是第一张图片前是周后一张图片,最后一张图片后是第一张图片,下面说下关于ajax获取img url动态添加到dom中的处理。
ajax与mui轮播图结合
html部分代码
<html> <head> <meta charset="UTF-8"> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> <style> #banner{ height: 200px; width: 100%; } </style> </head> <body> <!--轮播盒子--> <div id="slider" class="mui-slider" > </div> </body></html>
JavaScript部分代码
<script> //ajax获取 mui.ajax('http://datainfo.duapp.com/shopdata/getBanner.php?callback=',{ dataType:'jsonp',//服务器返回json格式数据 type:'post',//HTTP请求类型 success:function(data){ //字符串转arr var l=data.length; var data=data.substring(1,l-1) var arr=JSON.parse(data) //获取arr长度 var arrl=arr.length-1 //图片html代码 //轮播盒子 var tmp='<div class="mui-slider-group mui-slider-loop">'; //第一个或者最后一个轮播图 var tmp1='<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="' //常规轮播图 var tmp2='<div class="mui-slider-item"><a href="#"><img src="' //公共结尾 var tmp3='" id="banner"></a></div>' //按钮盒子 //按钮盒子 var anniu='<div class="mui-slider-indicator">' //第一个按钮盒子 var anniu1='<div class="mui-indicator mui-active"></div>' //常规按钮盒子 var anniu2='<div class="mui-indicator"></div>' //循环遍历arr for(i in arr){ //获取img src var img=JSON.parse(arr[i].goodsBenUrl)[0]; //判断i是否为0 if(i==0){ tmp+=tmp1+JSON.parse(arr[arrl].goodsBenUrl)[0]+tmp3 anniu+=anniu1 }else{ anniu+=anniu2 } tmp+=tmp2+img+tmp3 if(i==arrl){ tmp+=tmp1+JSON.parse(arr[0].goodsBenUrl)[0]+tmp3 } } //轮播盒子结尾 tmp+='</div>' //按钮盒子结尾 anniu+='</div>' //轮播与按钮拼接 tmp+=anniu //获取页面上的盒子 var bigbox=document.getElementById('slider') //添加进盒子 bigbox.innerHTML=tmp; //手动调用图片轮播的初始化方法 var gallery = mui('.mui-slider'); gallery.slider({ interval:5000//自动轮播周期,若为0则不自动播放,默认为0; }); } });</script>
补充下:上面数据接口地址 http://datainfo.duapp.com//shopdata//datainfo.html
1 0
- MUI 混合开发 轮播图应用
- cordova混合应用开发总结
- 最终实现混合app仿淘宝app自动识别淘口令 第一篇:mui混合开发获取原生剪切板内容
- H5混合开发,框架MUI-H5+,微信小程序,Vue.js,PHP,JavaScript,ReactNative,
- 【备忘】2017年最新使用MUI开发跨平台混合APP全套完整视频教程
- 使用Html5开发Android和iOS应用:HBuilder、Html5Plus、MUI
- HybridAPP框架MUI(跨平台移动端应用开发)
- MUI中的AJAX应用
- 混合型应用开发全接触
- 移动混合应用Hybrid App开发实战
- android-使用webview来开发混合应用
- AppCan IDE-Hybrid混合应用开发平台
- mui框架混合app关于定位问题
- mui开发注意事项
- Mui+Angularjs 开发app
- MUI开发注意事项
- MUI开发注意事项
- MUI开发Tips
- 在O(1)时间复杂度删除链表节点
- 模板类的定义与实现
- 目标检测领域
- java之网络编程学习笔记
- JAVA面试题05-ConcurrentHashMap的实现
- MUI 混合开发 轮播图应用
- 第四周linux常用命令
- SublimeText 相关
- 用冒泡排序模拟实现qsort
- 回归故乡发展
- LeetCode | 506. Relative Ranks
- LeetCode 412. Fizz Buzz
- Java Web 解决POI导入大批量Excel2007数据报内存溢出问题
- 字符串替换