mui轮播图片

最新推荐文章于 2024-10-03 12:14:00 发布

原创最新推荐文章于 2024-10-03 12:14:00 发布 · 8.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#图片 #轮播图片 #mui

mui学习专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用mui框架创建轮播图片效果。关键在于引入mui.min.css和mui.min.js文件，这些文件可通过HBuilder自动生成或者从指定资源链接下载。在index-waimai.html中实现基本结构，并在index-waimai.css中定制样式。

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

大家注意的是：要用mui实现效果，肯定是要有这两个东西的mui.min.css和mui.min.js，我是用hbuilder软件将模板自动生成的，就有这两个文件，如果没有，你们可以在我的资源下载http://download.youkuaiyun.com/detail/agnesluo/9553392

index-waimai.html文件中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello MUI</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.min.css">
            <!--App自定义的css-->
        <link rel="stylesheet" type="text/css" href="css/index-waimai.html.css" />
        <style>
            html,body {
                background-color: #efeff4 !important;
                width:100%;
            }

        </style>
    </head>
    <body>

<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/lunbo2.PNG">
                    </a>
                </div>
                <!-- 第一张 -->
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="images/lunbo1.PNG">
                    </a>
                </div>
                <!-- 第二张 -->
                <div class="mui-slider-item">
                    <a href="#">
                        <img src="images/lunbo2.PNG">
                    </a>
                </div>

                <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a href="#">
                        <img src="images/lunbo1.PNG">
                    </a>
                </div>
            </div>
            <!--通常轮播图中那个小圆点，页面轮播他也会移动-->
        <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>

            </div>
        </div>
</body>
<script src="js/mui.min.js"></script>
    <script>
        mui.init({
            swipeBack:true //启用右滑关闭功能
        });
        var slider = mui("#slider");
        slider.slider({
            interval: 5000         //每隔5秒调用一次
        });

    </script>
</html>

在index-waimai.css中设置样式

#lunbo{
    width: 100%;
    height: 150px;
    overflow: hidden; 
}
.mui-slider {
    width: 100%;
    height: 140px;
}  
/*轮播图片*/

.mui-slider img {
    height: 140px;  
    width: 100%;  
}
/*轮播指示点*/

.mui-slider-indicator .mui-active {
    background-color: #FF6696 !important;
}
.mui-slider-indicator .mui-indicator {
    box-shadow: none !important;
    background-color: #EEEEEE;
    opacity: 0.7;  /*透明度*/
}