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

Posted 大胖hy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了MUI前端框架轮播图片+九宫格(左右滑动)相关的知识，希望对你有一定的参考价值。

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

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 ></script>

<script ></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 >

</a>

</div>

<div class="mui-slider-item">

<a href="#"> <img >

</a>

</div>

<div class="mui-slider-item">

<a href="#"> <img >

</a>

</div>

<div class="mui-slider-item">

<a href="#"> <img >

</a>

</div>

<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->

<div class="mui-slider-item mui-slider-item-duplicate">

<a href="#"> <img >

</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 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">

<a>第二页</a>

</div>

<div class="mui-slider-item">

<a>第三页</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>

</div>

</div>

</body>

</html>

3、所用到的文件有index.js、style.css


style.css代码如下：

  1. .mui-plus.mui-android header.mui-bar {  

  2.     display: none;  

  3. }  

  4.   

  5. .mui-plus.mui-android .mui-bar-nav ~ .mui-content {  

  6.     padding: 0;  

  7. }  

  8.   

  9. .mui-slider-indicator {  

  10.     bottom: 0;  

  11. }  

  12.   

  13. .mui-slider {  

  14.     background-color: #f2f2f2;  

  15. }  

index.js代码如下

  1. mui.init();  

  2. mui.ready(function() {  

  3.     var slider = document.getElementById('Gallery');  

  4.     var group = slider.querySelector('.mui-slider-group');  

  5.     var items = mui('.mui-slider-item', group);  

  6.     // 克隆第一个节点  

  7.     var first = items[0].cloneNode(true);  

  8.     first.classList.add('mui-slider-item-duplicate');  

  9.     // 克隆最后一个节点  

  10.     var last = items[items.length - 1].cloneNode(true);  

  11.     last.classList.add('mui-slider-item-duplicate');  

  12.     // 轮播图片定时  

  13.     var slider = mui("#slider");  

  14.     slider.slider({  

  15.         interval : 4000  

  16.     });  

  17. });  

4、效果图



以上是关于MUI前端框架轮播图片+九宫格(左右滑动)的主要内容，如果未能解决你的问题，请参考以下文章

做一个前端网页送给女朋友~轮播图+纪念日

前端必备技能——轮播图（原生代码+插件）

纯前端实现—手动轮播图

纯前端实现—手动轮播图

免费报名ITA1024前端技术在线分享：MUI-最接近原生体验的前端框架

前端框架MUI开发App