<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. java初探native

    最近碰见一个java中一个native关键字,不知道是干什么的,如下: public native String FileName(String strURL);     static{        ...

  2. 小课堂week14 Google软件测试之道

    读<Google软件测试之道> 在IT领域,Google是一面旗帜,是一家非常善于思考善于尝试的公司.随着面临挑战的不断增大,传统的测试开展方式也越来越力不从心,这本书讲述的就是一次完整的 ...

  3. Unicode字符以16进制表示

    int(x [,base ])         将x转换为一个整数 long(x [,base ])        将x转换为一个长整数 float(x )               将x转换到一个 ...

  4. knockoutjs表格增加更新删除

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  5. hdu 5224 Tom and paper

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5224 Tom and paper Description There is a piece of pa ...

  6. ios8中的UIScreen

    let orientation: UIInterfaceOrientation = UIApplication.sharedApplication().statusBarOrientation pri ...

  7. mac os x 系统安装 genymotion android 模拟器

    如果你有 apk 文件 想 运行一下看看 ,但是又没有  android 设备 ,那么 genymotion 将会是一个  很好的解决方案. 1.安装 下载链接: https://cloud.geny ...

  8. [转]NHibernate之映射文件配置说明

    1. hibernate-mapping 这个元素包括以下可选的属性.schema属性,指明了这个映射所引用的表所在的schema名称.假若指定了这个属性, 表名会加上所指定的schema的名字扩展为 ...

  9. EF6 在原有数据库中使用 CodeFirst 总复习(三、重建迁移)

    本来原来学的时候,挺顺利的,没想到再次使用,还是遇到很多问题,导致更新失败,所以,只能重建迁移,免得看着乱乱的. 一.删除迁移,将数据恢复到(一)结束状态 1.删除文件夹 2.删除表 3.删除列 4. ...

  10. flask环境配置

    1.首先要看装python环境,最好是python 2.7版本的: 2.安装easy_install,至今也不确定这个东西是怎么装的,我先下载了一个ez_setup,用命令“python ez_set ...