精华内容
下载资源
问答
  • mui轮播图

    2019-10-04 05:48:58
    轮播组件是mui提供的一个核心组件,在该核心组件基础上,衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件,这些组件有较多共同点。Dom构造: <div class="mui-slider"> <div ...

    轮播组件是mui提供的一个核心组件,在该核心组件基础上,衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件,这些组件有较多共同点。
    Dom构造:

    <div class="mui-slider">
        <div class="mui-slider-group">
           <div class="mui-slider-item">
               <a href="#" ><img src="img/1.jpg"/></a>
            </div>
            <div class="mui-slider-item">
                <a href="#" ><img src="img/2.jpg"/></a>
            </div>
            <div class="mui-slider-item">
                <a href="#" ><img src="img/3.jpg"/></a>
            </div>
        </div>
    </div>

    js部分

    <script type="text/javascript"> mui.plusReady(function(){ //确保h5+及dom结构加载完毕,真机运行才会起作用 //mui.init();不能完成动态加载,而这段完整代码可以,我们以后肯定需要从远程服务器动态设置轮播效果及图片,那时这段代码就是必须要写的 //获得slider插件对象 var gallery = mui('.mui-slider'); gallery.slider({ interval:5000//自动轮播周期,若为0则不自动播放,默认为0; }); }); </script>


    显示圆点

    <div class="mui-slider-indicator"> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> </div>

    放置的位置是与mui-slider-group同级,有几张图片就写几个mui-indicator


    轮播循环
    若要支持循环,则需要在.mui-slider-group节点上增加.mui-slider-loop类,同时需要重复增加2张图片,图片顺序变为:4、1、2、3、4、1,代码示例如下:

    <div class="mui-slider"> <div class="mui-slider-group mui-slider-loop"> <!--支持循环,需要重复图片节点--> <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div> <!--支持循环,需要重复图片节点--> <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div> </div> </div>


    轮播跳转

    若要跳转到第x张图片,则可以使用图片轮播插件的gotoItem方法,例如:

    var gallery = mui('.mui-slider'); gallery.slider().gotoItem(index);//跳转到第index张图片,index从0开始;


    轮播事件
    当拖动切换显示内容时,会触发slide事件,通过该事件的detail.slideNumber参数可以获得当前显示项的索引(第一项索引为0,第二项为1,以此类推),利用该事件,可在显示内容切换时,动态处理一些业务逻辑。

    如下为一个可拖动式选项卡示例,为提高页面加载速度,页面加载时,仅显示第一个选项卡的内容,第二、第三选项卡内容为空。
    当切换到第二、第三个选项卡时,再动态获取相应内容进行显示:

    var item2Show = false,item3Show = false;//子选项卡是否显示标志 document.querySelector('.mui-slider').addEventListener('slide', function(event) { if (event.detail.slideNumber === 1&&!item2Show) { //切换到第二个选项卡 //根据具体业务,动态获得第二个选项卡内容; var content = .... //显示内容 document.getElementById("item2").innerHTML = content; //改变标志位,下次直接显示 item2Show = true; } else if (event.detail.slideNumber === 2&&!item3Show) { //切换到第三个选项卡 //根据具体业务,动态获得第三个选项卡内容; var content = .... //显示内容 document.getElementById("item3").innerHTML = content; //改变标志位,下次直接显示 item3Show = true; } });


    图片轮播、可拖动式图文表格等均可按照同样方式监听内容变化,比如我们可以在图片轮播界面显示当前正在看的是第几张图片:

    document.querySelector('.mui-slider').addEventListener('slide', function(event) { //注意slideNumber是从0开始的; document.getElementById("info").innerText = "你正在看第"+(event.detail.slideNumber+1)+"张图片"; });
     

    转载于:https://www.cnblogs.com/yinmeng/p/7226293.html

    展开全文
  • mui轮播图片

    千次阅读 2016-03-19 17:41:22
    index-waimai.html文件中<!DOCTYPE html> <title>Hello MUI , initial-scale=1,maximum-

    大家注意的是:要用mui实现效果,肯定是要有这两个东西的mui.min.css和mui.min.js,我是用hbuilder软件将模板自动生成的,就有这两个文件,如果没有,你们可以在我的资源下载http://download.csdn.net/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;  /*透明度*/
    }
    展开全文
  • mui 轮播图 小圆点 置于轮播图上方

    千次阅读 2018-08-27 15:08:56
    圆点置于轮播图上方,我分为两种情况。...但在我用mui官网的轮播图代码时,发现我的小圆点总是藏匿于图片之下,看不见。 解决方法:在小圆点的div中加style="z-index: 2;",再在css中调整一...

    圆点置于轮播图上方,我分为两种情况。

    一种是top值改变,另一种是层级的改变。

    一、top值

    top值主要是改变小圆点在整个页面的位置。不多说。

    二、层级

    我想实现下图这样的轮播图,小圆点显示于轮播图偏下位置。

    但在我用mui官网的轮播图代码时,发现我的小圆点总是藏匿于图片之下,看不见。

    解决方法:在小圆点的div中加style="z-index: 2;",再在css中调整一下top值即可。

    展开全文
  • mui 轮播图写法

    2020-01-10 16:56:41
    <divclass="mui-slider"id="slider"> <divclass="mui-slider-groupmui-slider-loop"> <...--额外增加的一个节点(循环轮播:第一个节点是最后一张轮播)--> <divclass="mui-...

     

     

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

            <div class="mui-slider-group mui-slider-loop">

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

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

                <a href="#"><img src="/html/img/staff-canteen-img/pic04.png"></a>

                </div>

                <!-- 第一张 -->

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

                    <a href="#"><img src="/html/img/staff-canteen-img/pic02.png"></a>

                </div>

                <!-- 第二张 -->

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

                <a href="#"><img src="/html/img/staff-canteen-img/pic03.png"></a>

                </div>

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

                <a href="#"><img src="/html/img/staff-canteen-img/pic04.png"></a>

                </div>

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

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

                <a href="#"><img src="/html/img/staff-canteen-img/pic02.png"></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>

     

    <link rel="stylesheet" href="/html/css/plugs/mui.css">

    <script src="/html/js/plugs/mui.min.js"></script>

    <script src="/html/js/plugs/jquery-3.3.1.min.js"></script>

    <script>

        var gallery = mui('#slider');

            gallery.slider({

                interval:3000//,默认为0;

            });

    </script>

     

     

    展开全文
  • vue+mui轮播图

    2018-12-27 01:57:00
    mui轮播图,如果图片是请求来的,直接在html中循环是不会动的。 需要请求完图片之后,在setTimeout方法里,使用slider()方法,这样才会动 而且mui轮播图,有点坑的,需要重复最后一张和第一张,才会无缝链接 ...
  • mui 轮播图渲染

    2020-12-24 10:59:49
    /* 获取轮播图数据 */ function getSwiper(){ var url = comUrl + "/swipper/list" $.ajax({ type: "get", url: url, success: function(res) { console.log(res); var data = res.data var...
  • 使用mui轮播图点击预览放大

    千次阅读 2018-05-28 00:02:36
    mui轮播图有点击预览功能,但是这个预览放大,只是和原图大小一样,有时候要让图片变的更大就要想其它办法了第一种&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "...
  • mui 轮播 代码和js

    2019-11-08 10:27:42
    <div class="mui-slider"> <!-- 轮播图的图片容器 -->...-- 如果要添加无缝轮播图 轮播图图片容器要添加一个mui-slider-loop 类名 --> <div class="mui-slider-group mui-slider-loop"...
  • vue+mui 轮播图

    2019-08-15 17:50:49
    mui 轮播图 < / title > < meta name = "viewport" content = "width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1, maximum-scale=1, viewport-fit=cover" / > < link rel = ...
  • 效果:自动轮播,可以左右滑动 1、配置App.vue文件,通过<...加载轮播图页面 <template> <div class="app-container"> <header id="header" class="mui-bar mui-bar-nav"> <...
  • mui轮播图及预览

    千次阅读 2017-09-22 15:52:41
    //ajax 调用 --> //ajax 调用 --> 查看设计师 ...mui.previewImage();...轮播 jQuery('.mui
  • 使用Apicloud 编译的APP,如果使用了mui框架的轮播图会有一个问题: 就是在轮播图上滑动滚动条时会报错,这是由于mui.js中禁止了默认事件的原因,导致滑动的时候无法判断这个活动事件的原因 解决方式: 在使用轮播图...
  • 直接引入文档,轮播图只能手动切换,不能自动轮播,是初始化代码有问题 mui写的实例,div代码块 <div id="slider" class="mui-slider" > <div class="mui-slider-group mui-slider-loop" id="stul"> &...
  • [Intervention] Unable to preventDefault inside passive event listener due to target being treated as… 两个方案: ...window.addEventListener(‘touchmove’, func, { passive: false }) (2)应用 CSS 属性 ...
  • 最近在做项目的时候,发现Mui轮播图遇到个问题,设置了自动播放但是怎么也不能自动播放,这是为什么呢? 1、原来如果动态给mui图片轮播添加图片,又使用的ajax获取的数据,但是你ajax 还没有执行完成,已经执行...
  • 我使用的是mui+vue,社区关于轮播图失效的问题也有几个。我这边遇到的一个情况是我把所有的东西都写到plusReady事件中会导致轮播图搞死都不动,按照其他问答解决了vue生命周期等等的问题。提出来写没问题。放进去有不...
  • 轮播内容由p标签代替,总的来说整体轮换轮播构架差不多都是前后各加首尾交替. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <...
  • ... <!... ,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <link href="css/mui....效果如下:   转载于:https://www.cnblogs.com/yinmeng/p/7228054.html
  • 使用Vue-MUI轮播图失效问题解决案例(在Vue的update中执行)。 我使用的是mui+vue,社区关于轮播图失效的问题也有几个。我这边遇到的一个情况是我把所有的东西都写到plusReady事件中会导致轮播图搞死都不动,按照其他...
  • mui 轮播

    2019-10-06 10:56:20
    需要轮播可轮训滑动的话 必须加上class="mui-slider-item-duplicate" 并且还要把最后一个轮播图多复制出来一条放到第一个上,再把第一个轮播图复制出来放到最后 --> < div class ="mui-content" > < div ...
  • VUE 结合MUI 实现轮播图轮播效果

    千次阅读 2018-10-17 13:27:40
    MUI 实现轮播图轮播效果 mui写的实例,div代码块 &amp;amp;amp;lt;div id=&amp;amp;quot;slider&amp;amp;quot; class=&amp;amp;quot;mui-slider&amp;amp;quot; &amp;amp;amp;gt;
  • mui+vue轮播图

    2019-01-03 11:00:15
    Mui+Vue,轮播图,示例一,示例二,三个版本,可以参考使用
  • MUI轮播组件

    千次阅读 2018-01-26 11:15:13
    常用API var slider = mui('.mui-sliderr').slider(); //获取轮播对象,之后... //切换至第二个轮播 slider.prevItem(); //上一个轮播 slider.nextItem(); //下一个轮播 slider.getSlideNumber(); //当前所处位置
  • mui轮播绑定

    2019-09-26 05:41:25
    <div class="mui-content"> <ul class="mui-table-view mui-table-view-chevron"> <li id="switch" class="mui-table-view-cell" style="disp...
  • MUI-图片轮播控件

    万次阅读 2015-10-26 13:42:02
    图片轮播继承自slide插件,因此其DOM结构、事件均和slide插件...假设当前图片轮播中有1、2、3、4四张图片,从第1张图片起,依次向左滑动切换图片,当切换到第4张图片时,继续向左滑动,接下来会有两种效果: (1)循环

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,718
精华内容 687
关键字:

mui的轮播图