mui的轮播器底下的小圆圈按钮无法跟轮播图在同一时间内运动执行,貌似是前后顺序的问题,这个用户体验很不好,现在应该怎么破,求解?
- 发布:2016-11-11 09:51
- 更新:2017-05-24 11:26
- 阅读:2674
骑驴走走 (作者)
红色的框里面的那几个小圆点跟图片的轮播运动不是同时运动的,好像先后顺序运动的。
代码如下:
<!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劳斯 - Q:1685658203
那个底部标识是直接设置圆点的颜色来指示当前的图片,没有滑动动画效果,如果你需要小圆圈按钮跟轮播图在同一时间内运动执行的效果,需要你自己写js操作,mui应该是不提供方法的
-
骑驴走走 (作者)
我是按官方的例子做的,我现在要实现的不是底部标识滑动的效果,而是图片切换完了,底部标识马上跟着切换。官方的那个例子是图片切换完了,底部标识才会跟着切换,中途延迟了切换,应该说是轮播图切换完后,才会切换。现在就是不知道怎么破。
2016-11-11 11:04
骑驴走走 (作者)
代码已贴出,麻烦帮忙解决下
2016-11-11 10:33
无处不在的叶子
貌似这个是官方开发出来就这调性。。。这个目前除非你自己自定义下面的点点了,图片轮转的时候你手动设置点点的高亮
2016-11-11 10:37