MUI前端框架轮播图片+九宫格(左右滑动)

来源：互联网发布：内存卡数据恢复软件编辑：程序博客网时间：2024/05/17 07:21

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"><liclass="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><liclass="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> <span class="mui-icon mui-icon-chatbubble"><spanclass="mui-badge">5</span></span><div class="mui-media-body">通知</div></a></li><liclass="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><liclass="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><liclass="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><liclass="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><liclass="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><liclass="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><liclass="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"><liclass="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><liclass="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> <span class="mui-icon mui-icon-chatbubble"><spanclass="mui-badge">5</span></span><div class="mui-media-body">通知</div></a></li><liclass="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><liclass="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><liclass="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><liclass="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><liclass="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><liclass="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><liclass="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"><liclass="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><liclass="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> <span class="mui-icon mui-icon-chatbubble"><spanclass="mui-badge">5</span></span><div class="mui-media-body">通知</div></a></li><liclass="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><liclass="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><liclass="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><liclass="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><liclass="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><liclass="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><liclass="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、效果图

阅读全文

0 0