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

最新推荐文章于 2025-05-21 14:05:38 发布

大胖hy

最新推荐文章于 2025-05-21 14:05:38 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html 文章标签： mui 轮播图片九宫格

本文链接：https://blog.youkuaiyun.com/ghy_gong/article/details/75136500

本文介绍了如何使用MUI框架来创建一个包含轮播图片和九宫格布局的页面。涉及到的文件包括mui.min.js、mui.min.css和fonts/mui.ttf。内容中提供了index.html的代码结构，展示了如何设置轮播图和九宫格，并引入了相应的样式表和脚本文件。此外，还使用了mui.init()和mui.ready()初始化轮播组件，并设置了轮播间隔时间为4000毫秒。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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