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>

　　

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. asp TreeView控件的使用

    相对于之前发过一个TreeView控件的使用方法 本次利用js操作,页面无刷新,性能提高 Css编码可能时我的模板页样式被继承下来,导致页面变乱,不需要的可以去掉 前台 <style> . ...

  2. SQL Server Reporting Service(SSRS) 第三篇 SSRS Matrix用法

    以前不是太清楚SSRS的功能,自从最近有了了解之后,发现它的功能的确很强大.对于Matrix,刚开始我竟不知道它到底有什么用,现将通过一个例子中去理解Matrix,以及和分组Group结合使用的便利性 ...

  3. Linux 虚拟机重新生成配置文件无法启动

    ifconfig...没有看到eth0..然后重启网卡又报下面错误. 故障现象: service network restartShutting down loopback insterface:  ...

  4. 深入理解javascript系列，读书笔记

    深入理解JavaScript系列(2):揭秘命名函数表达式 1.讲了函数声明和函数表达式的区别,包括一些在函数提升上的区别 2.如果给函数表达式的函数也取名,会在调试的时候受益 3.不要在block( ...

  5. HTML5Viewer中如何运行时绑定多数据源

    很多报表控件提供HTML5Viewer 支持跨设备的报表系统,当然在很多情况下,一个系统可包含多个报表文件,这些报表的数据有可能均为运行时绑定数据源,那么在html5viewer中对一张报表通过重写W ...

  6. 用python爬取QQ空间

    好久没写博文了,最近捣鼓了一下python,好像有点上瘾了,感觉python比js厉害好多,但是接触不久,只看了<[大家网]Python基础教程(第2版)[www.TopSage.com]> ...

  7. 使用requestAnimationFrame做动画效果一

    最近学习了requestAnimationFrame,看了张鑫旭直白易懂,但是某些地方语言过于裸露的文章http://www.zhangxinxu.com/wordpress/2013/09/css3 ...

  8. 安装linux操作系统

    安装双操作系统; 1 0. 介绍: 1 1 实验环境: 2 2. 实验准备: 2 3.开始安装: 2 1 制作U盘启动工具: 2 2.安装LinuxOS. 3 2.1在windowOS中划分60G空间 ...

  9. ThinkPHP 3.2.3（三）架构之模块化设计

    一.概念 应用:基于同一个入口文件访问的项目称之为一个应用. 模块:一个应用下面可以包含多个模块,每个模块在应用目录下面都是一个独立的子目录,是一个包含配置文件.函数文件和MVC文件(目录)的集合. ...

  10. uiimage 上传 数据库

    之前我所接触的上传图片都是直接与服务器交互的,即 app端要做的就是上传到服务器 现在这个项目却是app先上传到"数据库",由"数据库"传到服务端 下面说主题 ...