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

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

下面就是简单的实例：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  6.     <meta content="no" name="apple-touch-fullscreen">
  7.     <meta name="format-detection" content="telephone=no">
  8.     <meta content="no" name="apple-mobile-web-app-capable">
  9. 	<title>Document</title>
  10. 	<script src="jquery-1.11.1.min.js"></script>
  11.  
  12. 	<style>
  13. 	html,body{height: 100%;width: 100%}
  14. 	*{margin: 0;padding: 0;list-style: none;}
  15. 		.dome{
  16. 			height: 100%;
  17. 			display: box;
  18. 			display: -moz-box;
  19. 			display: -webkit-box;
  20. 			-moz-box-orient: vertical;
  21. 			-webkit-box-orient: vertical;
  22. 			-moz-box-pack:center;
  23.     		-moz-box-align:center;
  24.     		-webkit-box-pack:center;
  25.     		-webkit-box-align:center;
  26. 		}
  27. 		.banner {
  28. 			width: 100%;
  29. 			text-align: center;
  30. 			position: relative;
  31. 			overflow: auto;
  32. 		}
  33.         .banner ul li { float: left; }
  34.         .banner ul li img{width: 100%}
  35.         .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
  36.         .dots li {
  37. 			display: inline-block;
  38. 			width: 10px;
  39. 			height: 10px;
  40. 			margin: 0 4px;
  41. 			text-indent: -999em;
  42. 			border: 2px solid #fff;
  43. 			border-radius: 6px;
  44. 			cursor: pointer;
  45. 			opacity: .4;
  46. 			-webkit-transition: background .5s, opacity .5s;
  47. 			-moz-transition: background .5s, opacity .5s;
  48. 			transition: background .5s, opacity .5s;
  49. 		}
  50. 		.dots li.active {
  51. 			background: #fff;
  52. 			opacity: 1;
  53. 		}
  54. 	</style>
  55. </head>
  56. <body class="one">
  57. 	<div class="dome">
  58. 	<div class="banner">
  59. 	    <ul>
  60. 	        <li><img src="01.jpg" alt=""></li>
  61. 		<li><img src="02.jpg" alt=""></li>
  62. 		<li><img src="03.jpg" alt=""></li>
  63. 		<li><img src="04.jpg" alt=""></li>
  64. 		<li><img src="05.jpg" alt=""></li>
  65. 	    </ul>
  66. 	</div>
  67. 	</div>
  68. </body>
  69. <script src="unslider.min.js"></script>
  70. <script src="jquery.event.move.js"></script>
  71. <script src="jquery.event.swipe.js"></script>
  72. <script>
  73.  
  74.     var unslider=$('.banner').unslider({
  75.     	speed: 500,
  76. 		delay: false,
  77. 		complete: function() {},
  78. 		keys: true,
  79. 		dots: true,
  80. 		autoplay: false,
  81. 		fluid: true
  82.     });
  83.  
  84.     var data = unslider.data('unslider');
  85.     var slides = $('.banner');
  86.         slides.on('swipeleft', function(e) {
  87.             data.next();
  88.         }).on('swiperight', function(e) {
  89.             data.prev();
  90.         });
  91.  
  92. </script>
  93. </html>

　　

unslider.js 实现移动web轮播的更多相关文章

  1. 纯js轮播图练习-2，js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  2. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  3. JS实现小图放大轮播效果

    JS实现小图放大轮播页面效果入下(图片为优行商旅页面照片): 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击下方小图可以实现切换 步骤一:建立HTML布局,具体如下: <body> ...

  4. js实现图片无缝轮播

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  6. 通过jquery js 实现幻灯片切换轮播效果

    观察各个电商网址轮播图的效果,总结了一下主要突破点与难点 1.->封装函数的步骤与具体实现 2->this关键字的指向 3->jquery js函数熟练运用 如animate 4-& ...

  7. JS+html--实现图片轮播

    大家肯定见过某些网站一个炫酷的页面,就是图片轮播,也就是我们常说的幻灯片播放.对于初学者来说,可能会有点头疼,没关系,小李在这给大家献上自己刚刚写好的关于图片轮播的代码. 以下功能的实现用了jQuer ...

  8. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  9. swiper.js + jquery.magnific-popup.js 实现奇葩的轮播需要

    奇葩的轮播图 说轮播图很简单的,一定是没有遇到厉害的产品. 先说需求: 首先,一个mask会有三张图片,点击左右按钮会左右滑动一张图片的宽度. 点击展示的三张图片的任意一张,弹出遮罩,显示该图片的放大 ...

随机推荐

  1. bootstrap 分页表格插件

    找了两个table的插件,一个是bootstrap table ,另一个是bootstrap-paginator 这里只介绍 bootstrap table 插件 使用及简单案例 文档介绍:http: ...

  2. 转：如何向妻子解释OOD

    如何向妻子解释OOD 前言 此文译自CodeProject上<How I explained OOD to my wife>一文,该文章在Top Articles上排名第3,读了之后觉得非 ...

  3. led灯的翻转函数

    定义: uint8_t led1_val; void LED1(uint8_t* val){ *val =!(*val); if( *val == 0x00 ) HAL_GPIO_WritePin ( ...

  4. mmorpg手游中的战斗系统

    目前的项目是一款mmorpg手游, 非常不幸的是,当前战斗系统的实现非常脆弱, 也毫无技巧可言.具体存在如下问题: 1.战斗层逻辑与自动战斗AI逻辑混在一起, 互相纠缠. 2.战斗层自身逻辑混乱不堪, ...

  5. 【转】Python 日期和时间

    本文转自:http://www.runoob.com/python/python-date-time.html Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能. Pytho ...

  6. 【LeetCode】#1 Two Sum

    [Question] Given an array of integers, return indices of the two numbers such that they add up to a ...

  7. Redis学习笔记二

    学习Redis添加Object时,由于Redis只能存取字符串String,对于其它数据类型形容:Int,long,double,Date等不提供支持,因而需要设计到对象的序列化和反序列化.java序 ...

  8. office2003安装公式编辑器mathtype5.2

    同事的一台电脑,xp系统,需要安装公式编辑器mathtype,安装完后,启动word时出现了宏的警告. 在菜单中,无论如何设置宏,都不能去除该提示框.删除了模板normal.dot,也不能解决该问题. ...

  9. 【翻译】安卓新播放器EXOplayer介绍

    http://developer.android.com/guide/topics/media/exoplayer.html   前言: Playing videos and music is a p ...

  10. MySQL使用技巧收集，持续更新中......

    1.查询时按某一内容为中文的字段,以拼音字母排序: SELECT * FROM game ORDER BY CONVERT(name USING GBK);