<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. DNS笔记 DNS区域集成到 Active Directory

    可以将 DNS 区域集成到 Active Directory 中以提供增强的容错功能和安全性.OpenDNS   Google Public DNS往返时间 (RTT) 远程访问服务 (RAS)域名与 ...

  2. Navicat Premium 11 For Mac 注册机

    http://mac.pcbeta.com/thread-138357-1-1.html

  3. js控制文本框只能输入数字 及 常用字符对应ASCII码值

    方法一: <INPUT TYPE='text' NAME=text onkeypress="a()"><script language=javascript> ...

  4. 异步导出excel

    最近看园里有几篇写有关导出导入excel的博客,我正好最近在项目中也有涉及想来一起分享一下,正好整理一下自己的思路. 一.异步的方式是通过iframe来实现,代码如下: if ($('#downloa ...

  5. Android去除CPU占用过高时屏幕四周闪红框

    话说有些时间没有更新博客了,今天正好解决这个问题,顺便把它记录下来.. 今天遇到的情况是这样的,当CPU占用过高时,屏幕四周会出现一个红框. 闪一次两次算了,但是挺萌的(TMD)不停的闪,我的钛合金狗 ...

  6. (转)Android网络命令

    转自:http://www.cnblogs.com/shunyao8210/archive/2010/08/10/1796214.html ifconfig 1.       作用 ifconfig用 ...

  7. 刀哥多线程之调度组gcd-12-group

    调度组 常规用法 - (void)group1 { // 1. 调度组 dispatch_group_t group = dispatch_group_create(); // 2. 队列 dispa ...

  8. C扩展 C++回顾到入门

    引言 C扩展也称C++, 是一个复(za)杂(ji)优(ken)秀(die)的语言. 本文通过开发中常用C++方式来了解和回顾C++这么语言. C++看了较多的书但还是觉得什么都不会. 只能说自己还付 ...

  9. entityFramework使用 codefirst

    新建项目 用nuget安装entityFramework,Install-Package Entityframework 建一个model和context //[Table("Custome ...

  10. Go原子计数

    通过原子计数可以在多线程情况下,对同一个数值进行加减操作,一般用于状态同步. 先看代码: package main import "fmt" import "time&q ...