<div id='slider' class='swipe'>
<div class="swipe-wrap">
<div><img src="data:image/img2.jpg" /></div>
<div><img src="data:image/img2.jpg" /></div>
<div><img src="data:image/img2.jpg" /></div>
</div>
<span id="position"> </span>
<a href="#" id="prev" onclick="slider.prev();return false;"></a>
<a href="#" id="next" onclick="slider.next();return false;"></a>
</div> <script src="js/swipe.js"></script>
<script>
var _position = document.getElementById("position");
var slider = new Swipe(document.getElementById('slider'), {
callback: function() {
// 当前位置
pos = slider.getPos(); for(var n = 0;n < slider.getNumSlides();n++){
bullets[n].className = '';
}
bullets[pos].className = 'on';
}
});
// 获取div个数
for (var n = 0;n < slider.getNumSlides();n++){
var e = document.createElement("em");
_position.appendChild(e); }
_position.getElementsByTagName("em")[0].className = "on";
bullets = document.getElementById('position').getElementsByTagName('em');
</script>
.swipe { margin:auto; position:relative; overflow:hidden; visibility: hidden;}
.swipe-wrap { overflow: hidden; position: relative; }
.swipe .swipe-wrap > div { position:relative; overflow:hidden;float:left; width:100%; }
.swipe, .swipe .swipe-wrap,.swipe, .swipe .swipe-wrap > div,.swipe, .swipe .swipe-wrap > div img{ width:100%; height:130px; } .swipe #position { position:absolute; bottom:8px; left: 50%;-webkit-transform: translate(-50%) }
.swipe #position em { display: inline-block; width:8px; height:8px; margin:0 4px; text-indent:-9999px; background:#fff; border-radius:6px; overflow:hidden; border: 2px solid white;}
.swipe #position em.on { background: transparent; } .swipe a#prev, .swipe a#next { display:block; height:34px; width:34px; color:#444; text-decoration:none; position: absolute; top:45px; z-index:; }
.swipe a#prev { left:0px; }
.swipe a#next { right:0px; }
.swipe a#prev:after, .swipe a#next:after { content:''; top:37%; position: absolute; width:7px; height:7px; border-color:#fff; border-style:solid; border-width:0 2px 2px 0; }
.swipe a#prev:after { left:15px; -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); }
.swipe a#next:after { right:15px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

swipejs的使用的更多相关文章

  1. swipejs

    http://swipejs.com/ http://www.scoop.it/t/javascript-for-mobile http://www.open-open.com/news/view/c ...

  2. swipejs的bug

    Github:https://github.com/thebird/Swipe 以下bug的修复方式皆来自于网上. 现在最新的版本是2.0,bug如下: 1.触摸后不会自动播放 修复方式, funct ...

  3. 手机端Zepto框架,利用swipejs插件做banner轮播图

    一,HTML部分<div class="banner"> <div id="slider" class="swipe"&g ...

  4. 转载:移动web开发规范

    本文来源:http://blog.csdn.net/joueu/article/details/44329825 以下是规范建议,均是日常在开发当中的的一些经验,仅供参考. 移动web开发规范 一.头 ...

  5. 移动端web开发进阶

    三个月前曾写过一篇跨终端响应式页面设计入门的博客,上了博客园头条也得到了不少关注,今天想在这篇博客的基础上,继续写一篇进阶的文章. 补充 基于“入门”一文,我想再补充几个基础知识点,主要都是针对iOS ...

  6. github上最全的资源教程-前端涉及的所有知识体系

    前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...

  7. 2013年优秀jQuery插件

    今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip ...

  8. 移动Web轮播图IOS卡顿的问题

    晚饭前,被测试吐槽说,banner轮播手动左右滑的时候会卡顿.我一看不科学啊,大水果手机怎么会卡顿.我一看测试手中拿的是iPod,我觉得大概是这小玩意性能不强悍,后来又拿来5S,依然会卡顿,有趣的是, ...

  9. Swipe2.1更新——移动Web内容滑块

    Swipe JS 是一个轻量级(3.7 kb) mobile slider,支持 1:1 触摸移动(基于精确的触摸位置的内容滑动). 但是我使用一段时间后发现两个bug,所以在官方2.0(官网http ...

随机推荐

  1. PHP CURL访问HTTPS使用详解

    三年前写过一篇<一个简陋的支持HTTPS的PHP CURL封装函数>,当时只是知其然不知其所以然,今天来详细梳理一下. https服务器post数据 代码如下 复制代码 function ...

  2. Material Design:CollapsingToolbarLayout

    activity_main.xml: <android.support.design.widget.CoordinatorLayout xmlns:android="http://sc ...

  3. deep learning学习环境Theano安装(win8+win7)

    官网安装说明Installing Theano:http://deeplearning.net/software/theano/install.html#alternative-anacondace ...

  4. Oracle Database Concepts:介绍模式对象(Introduction to Schema Objects)

    数据库模式(schema)是数据结构的逻辑容器,被称作模式对象(schema objects) 每一个数据库用户拥有一个和用户名相同的模式,例如hr用户拥有hr模式. 在一个产品数据库中,模式的拥有者 ...

  5. equals函数

    equals函数在Object类当中,而Object类是所有类的父类,所以所有的类里面都有equals函数. “==”操作符之前用于比较两个基本数据类型的值是否相等,而对于引用数据类型,“==”操作符 ...

  6. 多线程基本概论multithread

    多线程 基本概念 进程 进程是指在系统中正在运行的一个应用程序 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内 通过 活动监视器 可以查看 Mac 系统中所开启的进程 线程 进程要想 ...

  7. C# WinForm自定义控件响应键盘事件

    自己定义的winform控件,用其他键盘事件都无法响应,只有用ProcessCmdKey事件可以达到目的(别忘了主窗体的KeyPreview属性要设置为true),写法如下:         prot ...

  8. Python 爬虫实例

    下面是我写的一个简单爬虫实例 1.定义函数读取html网页的源代码 2.从源代码通过正则表达式挑选出自己需要获取的内容 3.序列中的htm依次写到d盘 #!/usr/bin/python import ...

  9. hdu 4255 A Famous Grid

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=4255 A Famous Grid Description Mr. B has recently dis ...

  10. 1.Knockout.Js(简介)

    前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下.然后刚刚发现在建立asp.net mvc4.0的应用程 ...