手机端Zepto框架,利用swipejs插件做banner轮播图
一,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轮播图的更多相关文章
- 第九十三节,html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计
html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...
- 前端框架之jQuery(二)----轮播图,放大镜
事件 页面载入 ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. $(document).ready(function(){}) -----------> ...
- js做的轮播图
以下那些注释呢,都是要靠自己理解才是最重要的, <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- 用avalon框架怎么做轮播图?
avalon这个框架其实特别的小众,做个轮播图呢?在github上的例子只有一个,而且功能特别的少,有的引入的插件与avalon里面的指令又不兼容,所以找了一个owl-carousel,目前实现了移动 ...
- React中使用CSSTransitionGroup插件实现轮播图
动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...
- JQ无缝轮播图-插件封装
类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...
- 高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...
- photoSlider-原生js移动开发轮播图、相册滑动插件
详细内容请点击 在线预览 立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...
- photoSlider-html5原生js移动开发轮播图-相册滑动插件
简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...
随机推荐
- cookielib模块基础学习
# -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' import cookielib #主要用于处理http客户端的co ...
- 基于google earth engine 云计算平台的全国水体变化研究
第一个博客密码忘记了,今天才来开通第二个博客,时间已经过去两年了,三年的硕士生涯,真的是感慨良多,最有收获的一段时光,莫过于在实验室一个人敲着代码了,研三来得到中科院深圳先进院,在这里开始了新的研究生 ...
- C++11里面的Lambda表达式
Lambda Expressions in C++ C++中的Lambda表达式 In Visual C++, a lambda expression—referred to as a lambda— ...
- Android-JNI编程-图文解析
要想阅读并调试下文源码,首先要确保你的NDK环境是ok的: 编译环境:win7+Eclipse+ADT+SDK+NDK:基本用最新的就ok. 说明下,下文代码就是一个简单的 ...
- Dalvik虚拟机简要介绍和学习计划
文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8852432 我们知道,Android应用程序是 ...
- 关于object在使用上的问题
关于object在使用上的问题 1.直接调用标签<object>中的单击事件 <object>是含有onclick和ondblclick两个事件的.按照以往方式,直接在里面调用 ...
- html简单样式
1.外部样式表 link rel="stylesheet" type="text/css" href="bbb.css"> 2.内部样 ...
- C#获取QQ旋风的下载记录
/* * 用户:从前的我 * 日期:2015/8/26 */ using System; using System.IO; namespace GetXf { class Program { publ ...
- Webform用户控件
用户控件一 用户控件二
- 关于css的优先级
样式的优先级 外部样式 < 内部样式 < 内联样式 选择器的优先权 解释: 1. 内联样式表的权值最高 1000: 2. ID 选择器的权值为 100; 3. Class 类选择器的 ...