一,HTML部分
<div class="banner">
<div id="slider" class="swipe">
<ul class="swipe-wrap">
<li>
<a href="javascript:void(0)">
<img src="img/1.jpg">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/2.jpg">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/3.jpg">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/4.jpg">
</a>
</li>
<li>
<a href="javascript:void(0)">
<img src="img/5.jpg">
</a>
</li>
</ul>
<ul class="slide-trigger">
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

二,css部分

.banner {
width: 100%;
position: relative;
}
.banner .swipe {
overflow: hidden;
position: relative;
}
.banner .swipe-wrap {
overflow: hidden;
position: relative;
list-style: none;
}
.banner .swipe-wrap li {
float: left;
position: relative;
}
.banner img {
width: 100%;
vertical-align: middle;
}
.banner .slide-trigger {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
z-index: 10;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
list-style: none;
}
.banner .slide-trigger li {
width: 10px;
height: 10px;
background: #FFF;
margin: 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.banner .slide-trigger .cur {
background: #2fc7c9;
}

三,js部分

<script src="jquery.js"></script>

<script src="zepto.js"></script>

<script src="swipe.js"></script>

<script>

var slider = $('#slider');
slider.find(".slide-trigger").find("li").eq(0).addClass("cur");
window.mySwipe = new Swipe(document.getElementById('slider'), {
speed: 400,
auto: 3000,
callback: fuction(index, elem) {
slider.find(".slide-trigger").find("li").eq(index).addClass("cur").siblings().removeClass("cur");
}
});
</script>

手机端Zepto框架,利用swipejs插件做banner轮播图的更多相关文章

  1. 第九十三节,html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计

    html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...

  2. 前端框架之jQuery(二)----轮播图,放大镜

    事件 页面载入   ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.   $(document).ready(function(){}) -----------> ...

  3. js做的轮播图

    以下那些注释呢,都是要靠自己理解才是最重要的, <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  4. 用avalon框架怎么做轮播图?

    avalon这个框架其实特别的小众,做个轮播图呢?在github上的例子只有一个,而且功能特别的少,有的引入的插件与avalon里面的指令又不兼容,所以找了一个owl-carousel,目前实现了移动 ...

  5. React中使用CSSTransitionGroup插件实现轮播图

    动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...

  6. JQ无缝轮播图-插件封装

    类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...

  7. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

  8. photoSlider-原生js移动开发轮播图、相册滑动插件

    详细内容请点击 在线预览   立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...

  9. photoSlider-html5原生js移动开发轮播图-相册滑动插件

    简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...

随机推荐

  1. jquery常用方法以及详解

    $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg", ...

  2. iOS面试题集

    现在寒假时间在家里面无法敲代码了,但是自己总要找些事情来做,回头想想马上就要开始就业了,所以不免要参加面试,于是便开始了面试题集的浏览和探索,今天下午我看了一部分的面试题感觉还是挺实用的,所以以后还是 ...

  3. 自适应SimpsonSimpson积分

  4. Android 使用Facebook的 Stetho工具

    Stetho在Android Studio中用: 1, 引入 compile 'com.facebook.stetho:stetho:1.3.1' compile 'com.facebook.stet ...

  5. Oracle/Mysql/SqlServer函数区别

    mysql日期和时间格式转换 Linux scp 使用详解 Oracle/Mysql/SqlServer函数区别 2011-07-01 12:34:36|  分类: Mysql技术 |  标签:mys ...

  6. Random获得的随机数怎么样减少重复率

    C#中的Random在获得随机数的时,如果你想要随机循环取得100个随机数则使用如下代码会出现大量的重复数字.代码如下: using System; namespace ConsoleApplicat ...

  7. 多加注意对null和“”的处理

    程序中对一些需要再次取值的引用类型参数,在引用之前,请千万注意对空的判断.当不清晰返回结果是null还是""时,应先判断null,再判断空字符串. LOFTER:我们的故事   h ...

  8. [C++程序设计]变量的存储类别

    全局变量全部存放在静态存储区中,在程序开始执行时给全局变量分配存储单元,程序执行完毕就释放这些空间.在程序执行过程中它们占据固定的存储单元,而不是动态地进行分配和释放. 在动态存储区中存放以下数据: ...

  9. PHP API反射实例

    *反射是操纵面向对象范型中元模型的API,其功能十分强大,可帮助我们构建复杂,可扩展的应用.其用途如:自动加载插件,自动生成文档,甚至可用来扩充PHP语言.php反射api由若干类组成,可帮助我们用来 ...

  10. linux查找命令find

    -1 linux的查找命令有两个: locate find locate:有一个索引库,故速度快,但是新加入的一般不再索引库中,故可能无法查到 find:搜索速度慢,但是功能及其强大,可以追加命令动作 ...