unslider.js 实现移动web轮播

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

unslider.js可以实现轮播，但是在移动端还需要另两个插件。

jquery.event.move和jQuery.event.swipe ；

下面就是简单的实例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="no" name="apple-touch-fullscreen">
<meta name="format-detection" content="telephone=no">
<meta content="no" name="apple-mobile-web-app-capable">
<title>Document</title>
<script src="jquery-1.11.1.min.js"></script><style>
html,body{height: 100%;width: 100%}
*{margin: 0;padding: 0;list-style: none;}
.dome{
height: 100%;
display: box;
display: -moz-box;
display: -webkit-box;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
-moz-box-pack:center;
-moz-box-align:center;
-webkit-box-pack:center;
-webkit-box-align:center;
}
.banner {
width: 100%;
text-align: center;
position: relative;
overflow: auto;
}
.banner ul li { float: left; }
.banner ul li img{width: 100%}
.dots { position: absolute; left: 0; right: 0; bottom: 20px;}
.dots li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.dots li.active {
background: #fff;
opacity: 1;
}
</style>
</head>
<body class="one">
<div class="dome">
<div class="banner">
<ul>
<li><img src="01.jpg" alt=""></li>
<li><img src="02.jpg" alt=""></li>
<li><img src="03.jpg" alt=""></li>
<li><img src="04.jpg" alt=""></li>
<li><img src="05.jpg" alt=""></li>
</ul>
</div>
</div>
</body>
<script src="unslider.min.js"></script>
<script src="jquery.event.move.js"></script>
<script src="jquery.event.swipe.js"></script>
<script> var unslider=$('.banner').unslider({
speed: 500,
delay: false,
complete: function() {},
keys: true,
dots: true,
autoplay: false,
fluid: true
}); var data = unslider.data('unslider');
var slides = $('.banner');
slides.on('swipeleft', function(e) {
data.next();
}).on('swiperight', function(e) {
data.prev();
});</script>
</html>