像这样，我想每次，都一点点滑动，让滑动的人，可以看到最后一个列表的内容，
请回答，多谢
开心啦
- 发布：2016-03-01 15:25
- 更新：2016-03-02 16:13
- 阅读：3129
左右滑动分页 如何判断 每次滑动的距离
分类：MUI
<!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">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<style>
.mui-slider .mui-slider-group .mui-slider-item {
width: 50%;
padding: 10px;
}
.mui-slider .mui-slider-group .mui-slider-item>a:not(.mui-control-item){
line-height: normal;
}
.mui-slider-item .mui-media-body{
color: #000;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">左右滑动分页</h1>
</header>
<div class="mui-content">
<div class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一个图文表格) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img class="mui-media-object" src="../images/cbd.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</div>
<div class="mui-slider-item">
<a href="#"><img class="mui-media-object" src="../images/yuantiao.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</div>
<div class="mui-slider-item">
<a href="#"><img class="mui-media-object" src="../images/shuijiao.jpg">
<div class="mui-media-body">幸福就是可以一起睡觉</div>
</a>
</div>
<div class="mui-slider-item">
<a href="#"><img class="mui-media-object" src="../images/muwu.jpg">
<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
</a>
</div>
<div class="mui-slider-item">
<a href="#"><img class="mui-media-object" src="../images/cbd.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一个图文表格) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img class="mui-media-object" src="../images/yuantiao.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</div>
</div>
<div class="mui-slider-indicator" style="position: static;background-color: #fff;">
<span class="mui-action mui-action-previous mui-icon mui-icon-back"></span>
<div class="mui-number">
<span>1</span> / 4
</div>
<span class="mui-action mui-action-next mui-icon mui-icon-forward"></span>
</div>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script>
mui.init();
</script>
</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">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<style>
.mui-slider .mui-slider-group .mui-slider-item {
width: 50%;
padding: 10px;
}
.mui-slider .mui-slider-group .mui-slider-item>a:not(.mui-control-item){
line-height: normal;
}
.mui-slider-item .mui-media-body{
color: #000;
}
.mui-slider {
position: relative;
z-index: 1;
overflow: hidden;
width: 110%;
margin-top: 1px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">左右滑动分页</h1>
</header>
<div class="mui-content">
<div class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一个图文表格) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img class="mui-media-object" src="../images/cbd.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</div>
<div class="mui-slider-item">
<a href="#"><img class="mui-media-object" src="../images/yuantiao.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</div>
<div class="mui-slider-item">
<a href="#"><img class="mui-media-object" src="../images/shuijiao.jpg">
<div class="mui-media-body">幸福就是可以一起睡觉</div>
</a>
</div>
<div class="mui-slider-item">
<a href="#"><img class="mui-media-object" src="../images/muwu.jpg">
<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
</a>
</div>
<div class="mui-slider-item">
<a href="#"><img class="mui-media-object" src="../images/cbd.jpg">
<div class="mui-media-body">静静看这世界</div>
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一个图文表格) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img class="mui-media-object" src="../images/yuantiao.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</div>
</div>
<div class="mui-slider-indicator" style="position: static;background-color: #fff;">
<span class="mui-action mui-action-previous mui-icon mui-icon-back"></span>
<div class="mui-number">
<span>1</span> / 4
</div>
<span class="mui-action mui-action-next mui-icon mui-icon-forward"></span>
</div>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script>
mui.init();
</script> </html>
开心啦 (作者)
不是一张一张走，是慢慢地，想滑动多少，就多少。
如那图，最后一个列表是超出屏幕，别人想滑出来看完整那个列表的内容，
以下的内容也是滑多少，就多少。
像在一条水平线上的东西，想滑多少 ，就多少
