骑驴走走
骑驴走走
  • 发布:2016-11-11 09:51
  • 更新:2017-05-24 11:26
  • 阅读:2674

mui的轮播器图片运动与底部按钮运动不同步?

分类:MUI
mui

mui的轮播器底下的小圆圈按钮无法跟轮播图在同一时间内运动执行,貌似是前后顺序的问题,这个用户体验很不好,现在应该怎么破,求解?

2016-11-11 09:51 负责人:无 分享
已邀请:
无处不在的叶子

无处不在的叶子

请贴出来你的代码,我昨天刚帮一个小丫头做了一个轮播的功能没发现你的问题。

  • 骑驴走走 (作者)

    代码已贴出,麻烦帮忙解决下

    2016-11-11 10:33

  • 无处不在的叶子

    貌似这个是官方开发出来就这调性。。。这个目前除非你自己自定义下面的点点了,图片轮转的时候你手动设置点点的高亮

    2016-11-11 10:37

骑驴走走

骑驴走走 (作者)

红色的框里面的那几个小圆点跟图片的轮播运动不是同时运动的,好像先后顺序运动的。


代码如下:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <link href="mui.min.css" rel="stylesheet" />  
    <script src="mui.min.js"></script>  
    <title>Document</title>  
</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="yuantiao.jpg">  
                </a>  
            </div>  
            <div class="mui-slider-item">  
                <a href="#">  
                    <img src="shuijiao.jpg">  
                </a>  
            </div>  
            <div class="mui-slider-item">  
                <a href="#">  
                    <img src="muwu.jpg">  
                </a>  
            </div>  
            <div class="mui-slider-item">  
                <a href="#">  
                    <img src="cbd.jpg">  
                </a>  
            </div>  
            <div class="mui-slider-item">  
                <a href="#">  
                    <img src="yuantiao.jpg">  
                </a>  
            </div>  
            <div class="mui-slider-item mui-slider-item-duplicate">  
                <a href="#">  
                    <img src="shuijiao.jpg">  
                </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 class="mui-indicator"></div>  
        </div>  
    </div>  
    <script>  
        mui.init({  
            swipeBack:true  
        });  
        mui("#slider").slider({  
            interval: 3000  
        });  
    </script>  
</body>  
</html>
R劳斯

R劳斯 - Q:1685658203

那个底部标识是直接设置圆点的颜色来指示当前的图片,没有滑动动画效果,如果你需要小圆圈按钮跟轮播图在同一时间内运动执行的效果,需要你自己写js操作,mui应该是不提供方法的

  • 骑驴走走 (作者)

    我是按官方的例子做的,我现在要实现的不是底部标识滑动的效果,而是图片切换完了,底部标识马上跟着切换。官方的那个例子是图片切换完了,底部标识才会跟着切换,中途延迟了切换,应该说是轮播图切换完后,才会切换。现在就是不知道怎么破。

    2016-11-11 11:04

无处不在的叶子

无处不在的叶子

在轮播的事件中手动来控制可以达到你的效果,不过说回来貌似没啥必要吧,这个体验还好啊

  • 骑驴走走 (作者)

    不单单是手势,连自动轮播都是有一种让人觉得轮播图跟底部标识不一致执行感觉,有种延迟的感觉在,觉得怪怪的

    2016-11-11 11:06

  • 无处不在的叶子

    确实有,没办法,这个你自己手动在轮播事件里面去设置mui-active试试能不能同步,他那个我估计做了延迟吧,或者你去改他的库文件

    2016-11-11 11:08

  • 骑驴走走 (作者)

    好的,谢谢!

    2016-11-11 11:15

android_yang

android_yang

解决了吗,能说下解决思路吗?

  • 桎梏

    请问一下解决了吗?

    2017-09-21 16:09

该问题目前已经被锁定, 无法添加新回复