MUI前端框架轮播图片+九宫格(左右滑动)
2017-07-14 20:33
441 查看
MUI前端框架轮播图片+九宫格(左右滑动)
1、需要文件mui.min.js、mui.min.css、fonts/mui.ttf
2、创建index.html,代码如下
style.css代码如下:
1、需要文件mui.min.js、mui.min.css、fonts/mui.ttf
2、创建index.html,代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="css/mui/mui.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script src="js/mui/mui.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="mui-content"> <ul class="mui-table-view mui-table-view-chevron"> </ul> <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="images/common3.png"> </a> </div> <div class="mui-slider-item"> <a href="#"> <img src="images/common1.png"> </a> </div> <div class="mui-slider-item"> <a href="#"> <img src="images/common2.png"> </a> </div> <div class="mui-slider-item"> <a href="#"> <img src="images/common3.png"> </a> </div> <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="images/common1.png"> </a> </div> </div> <div class="mui-slider-indicator mui-text-right"> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> </div> </div> <div id="Gallery" class="mui-slider" style="margin-top: 15px;"> <div class="mui-slider-group"> <div class="mui-slider-item"> <ul class="mui-table-view mui-grid-view mui-grid-9"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-person"></span> <div class="mui-media-body">个人中心</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-chatbubble"><span class="mui-badge">5</span></span> <div class="mui-media-body">通知</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-search"></span> <div class="mui-media-body">查询</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-gear"></span> <div class="mui-media-body">设置</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-info"></span> <div class="mui-media-body">关于</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-more"></span> <div class="mui-media-body">更多</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-more"></span> <div class="mui-media-body">更多</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-more"></span> <div class="mui-media-body">更多</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-more"></span> <div class="mui-media-body">更多</div> </a> </li> </ul> </div> <div class="mui-slider-item"> <ul class="mui-table-view mui-grid-view mui-grid-9"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-person"></span> <div class="mui-media-body">个人中心</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-chatbubble"><span class="mui-badge">5</span></span> <div class="mui-media-body">通知</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-search"></span> <div class="mui-media-body">查询</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-gear"></span> <div class="mui-media-body">设置</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-info"></span> <div class="mui-media-body">关于</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-more"></span> <div class="mui-media-body">更多</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-more"></span> <div class="mui-media-body">更多</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-more"></span> <div class="mui-media-body">更多</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-more"></span> <div class="mui-media-body">更多</div> </a> </li> </ul> </div> <div class="mui-slider-item"> <ul class="mui-table-view mui-grid-view mui-grid-9"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-person"></span> <div class="mui-media-body">个人中心</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-chatbubble"><span class="mui-badge">5</span></span> <div class="mui-media-body">通知</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-search"></span> <div class="mui-media-body">查询</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-gear"></span> <div class="mui-media-body">设置</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-info"></span> <div class="mui-media-body">关于</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-more"></span> <div class="mui-media-body">更多</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-more"></span> <div class="mui-media-body">更多</div> </a> </li> <li a63d class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-more"></span> <div class="mui-media-body">更多</div> </a> </li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <a href="#"> <span class="mui-icon mui-icon-more"></span> <div class="mui-media-body">更多</div> </a> </li> </ul> </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> </div> </body> </html>3、所用到的文件有index.js、style.css
style.css代码如下:
.mui-plus.mui-android header.mui-bar { display: none; } .mui-plus.mui-android .mui-bar-nav ~ .mui-content { padding: 0; } .mui-slider-indicator { bottom: 0; } .mui-slider { background-color: #f2f2f2; }index.js代码如下
mui.init(); mui.ready(function() { var slider = document.getElementById('Gallery'); var group = slider.querySelector('.mui-slider-group'); var items = mui('.mui-slider-item', group); // 克隆第一个节点 var first = items[0].cloneNode(true); first.classList.add('mui-slider-item-duplicate'); // 克隆最后一个节点 var last = items[items.length - 1].cloneNode(true); last.classList.add('mui-slider-item-duplicate'); // 轮播图片定时 var slider = mui("#slider"); slider.slider({ interval : 4000 }); });4、效果图
相关文章推荐
- js各种图片轮播滑动插件 上下,左右缩略图按钮点击图
- 【转】移动webApp开发的前端工程师必要的代码,手机webApp触摸左右滑动切换轮播图片广告
- [置顶] viewPager+photoView实现图片轮播和手势缩放功能 支持手势缩放的imageView 如何实现相册左右滑动和手势缩放 如何让图片自适应控件大小 photoView如何使用(上)
- 可以通过左右滑动和点击小按钮来实现图片的轮播
- 【实践】纯jquery实现图片滑动无缝轮播,带左右按钮及控制按钮
- Android实现图片自动轮播并且支持手势左右无限滑动
- PC端、移动端都可以用的图片轮播(左右滑动切换)插件及使用
- Android实现图片自动轮播并且支持手势左右无限滑动
- [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图
- 封装运动框架实战左右与上下滑动的焦点轮播图(实例)
- 转向移动webApp开发的前端工程师必要的代码,手机webApp触摸左右滑动切换轮播图片广告
- 手机webApp触摸左右滑动切换轮播图片广告
- Web前端框架之图片轮播
- 使用ViewPager实现图片自动播放效果,并可左右滑动
- iOS WebView 图片点击放大并左右滑动,类似微信/网易文章功能
- MUI组件二:复选框、对话框、图片轮播、图标和输入框
- 使用viewpager嵌套实现上下左右滑动切换图片(IOS双向滚动翻页效果相同)
- Android实现图片左右滑动效果
- Android 使用ViewPager实现左右循环滑动图片
- 纯JS轮播图,左右箭头/轮播点,自动+自适应屏幕+手机触屏滑动