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

jquery.event.movejQuery.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. Excel中提取最大值的问题

    在使用excel的时候,碰到了一个如下的问题 意思是以每个字母为条件,取这个字母下面的数字中的最大值,需要注意一个问题是每个字母下面的数字个数不一定相等,例如d下面有四个数字,可以设置如下公式解决: ...

  2. 对于Python中RawString的理解

    总结 1.'''作用: 可以表示 "多行注释" ."多行字符串" ."其内的单双引号不转义" 2.r 代表的意思是: raw 3.r 只对其 ...

  3. 媒体查询使用方法@media

    Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果.前面简单的介绍了Media Queries如何引用到项目中,但Media Queries有其自己的 ...

  4. JavaScript判断、循环、Map、Set

     本文是笔者在看廖雪峰老师JavaScript教程时的个人总结      一些判断条件                 JavaScript把null.undefined.0.NaN和空字符串''视为 ...

  5. [转]IE8兼容Object.keys

    转自:http://blog.sina.com.cn/s/blog_6d63cf160102vbsg.html 只需要加入 var DONT_ENUM = "propertyIsEnumer ...

  6. JAVA字符串05之课程问题解决

    (一)古罗马皇帝凯撒在打仗时曾经使用过以下方法加密军事情报:请编写一个程序,使用上述算法加密或解密用户输入的英文字串. 1.设计思想:首先选择是加密字符串还是解密字符串,两种算法相似.如果要加密字符串 ...

  7. gulp教程之gulp-rev-append

    简介: 使用gulp-rev-append给页面的引用添加版本号,清除页面引用缓存. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 ...

  8. Java—事件和多线程机制

    一  事件 1.1 事件源 图形用户界面上每个可能产生事件的组件称为事件源. 1.2 事件监听者 Java系统中注册的用于接收特殊事件的类.不同的事件对应着不同的监听者,要想事件被监听者监听并处理,则 ...

  9. 转载:手机网页制作的认识(有关meta标签)

    下面是手机网页的一些认识: 一.<meta name="viewport" id="viewport" content="width=devic ...

  10. python二进制相关

    https://docs.python.org/3/library/struct.html#module-struct