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%; 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 { 100%; text-align: center; position: relative; overflow: auto; } .banner ul li { float: left; } .banner ul li img{ 100%} .dots { position: absolute; left: 0; right: 0; bottom: 20px;} .dots li { display: inline-block; 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>