经典幻灯片插件Swiper
照着写的demo，搞清楚什么叫分页器Pagination，什么叫nav，搞清楚DOM结构，container，wrapper之类的，就能写了。效果掉渣天！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Swiper</title>
<link rel="stylesheet" href="./css/swiper.css">
<style type="text/css">
body {
font-family: arial,helvetica;
color: #F2F2F2;
} h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
margin: 0;
padding: 0;
} h1{
font-size: 6rem;
} .swiper-container {
width: 100%;
height: 500px;
text-align: center;
} #slide1{
background: #BFDA00;
} #slide1 h1{
color:#444;
} #slide2{
background: #2C3E50;
} #slide2 h1{
color:#fff;
} #slide3{
background: #AC4F2C;
} #slide3 h1{
color:#fff;
} .swiper-wrapper{
/*linear:规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease:规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in:规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out:规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out:规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。*/ /*transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
transition-timing-function: step-start;
transition-timing-function: step-end;
transition-timing-function: steps(4, end);
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);*/
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" id="slide1">
<h1>Swiper.js</h1>
</div>
<div class="swiper-slide" id="slide2">
<h1>is a wonderful</h1>
</div>
<div class="swiper-slide" id="slide3">
<h1>Plugin</h1>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div> <!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <!-- 如果需要滚动条 -->
<!--<div class="swiper-scrollbar"></div>-->
</div> <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/swiper/swiper.jquery.min.js"></script>
<!--<script type="text/javascript" src="./js/swiper/swiper.animate1.0.2.min.js"></script>-->
<script type="text/javascript">
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
loop: true, // 如果需要分页器
pagination: '.swiper-pagination', // 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev', // 如果需要滚动条
//scrollbar: '.swiper-scrollbar' autoplay: 3000,
//speed: 2000, grabCursor: true, roundLengths : true, freeMode: true,
//freeModeMomentum: false,
//freeModeMomentumRatio : 5, //effect:"cube",
effect:"coverflow"
});
</script>
</body>
</html>
这个是parallax的demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>swiper_parallax</title>
<link rel="stylesheet" href="./css/swiper.css">
<style type="text/css">
body {
font-family: arial,helvetica;
color: #F2F2F2;
} h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
margin: 0;
padding: 0;
} h1{
font-size: 6rem;
color:#fff;
} .swiper-container {
width: 100%;
height: 500px;
text-align: center;
} .swiper-wrapper{
position: absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="swiper-container">
<div style="background-image:url(./img/Parallax.jpg); background-size: 100% 500px; width:150%; height:500px; top:0; left:0;" data-swiper-parallax="-23%" data-swiper-parallax-duration="3000"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div data-swiper-parallax="-100">
<h1>Hello</h1>
</div>
</div>
<div class="swiper-slide">
<div data-swiper-parallax="-100">
<h1>World</h1>
</div>
</div>
</div>
</div> <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/swiper/swiper.jquery.min.js"></script>
<!--<script type="text/javascript" src="./js/swiper/swiper.animate1.0.2.min.js"></script>-->
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
parallax : true
});
</script>
</body>
</html>
API
http://www.swiper.com.cn/api/index.html
经典幻灯片插件Swiper的更多相关文章
- Owl Carousel幻灯片插件的使用
Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 ...
- 手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- jQuery幻灯片插件autoPic
原文地址:Jquery自定义幻灯片插件 插件效果图: 演示地址:autoPic项目地址:autoPic 欢迎批评指正!
- SlidesJS - 老牌的响应式 jQuery 幻灯片插件
SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...
- Skippr – 轻量、快速的 jQuery 幻灯片插件
Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...
- 幻灯片插件FlexSlider -- Amaze UI幻灯片参数
用了Amaze UI 的人就知道,其幻灯片插件是 data-am-slider='{}'来传参数的:(以下代码来自Amaze UI 官网) <div data-am-widget="s ...
- ResponsiveSlides.js最轻量级的幻灯片插件
摘要:ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件它支持包括IE6在内的几乎所有的浏览器,在IE6中还支持最大宽度属性,但在其它浏览器中并不原生支 ...
- JQuery之滑动幻灯片插件Easy Slider初体验
Easy Slider 是一个滑动幻灯片插件,支持任何图片或内容,可以实现横向或纵向滑动.它拥有一系列丰富的参数设置,可通过CSS来进行完全的控制.基本上只需要引入这个插件后,设置好内容,然后样式化C ...
- jq 幻灯片插件制作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 第三章 深入Servlet技术
3.1 配置Servlet <servlet-name>,<servlet-class>是必须配置的,以便于web容器知道浏览器具体访问的是哪个servlet. <ini ...
- angularJS1笔记-(19)-angular异步加载包的方式
我们平时写的导入包的方式都是同步方式,有时候会显得过于卡顿,这样我们就可以使用异步加载的方式. script.js方式: 执行结果为: 异步加载还可以加载多个即为script([,,,],functi ...
- css border 制作三角形
border 边框 上三角 是只有上面的border 有颜色,其余的边框都是tranparents,下三角只有下面的border 有颜色,其余的边框都是tranparents,左三角只有左面的bord ...
- Linux内核0.11 makefile文件说明
# # if you want the ram-disk device, define this to be the # size in blocks. # 如果要使用 RAM 就定义块的大小(注释掉 ...
- net user 修改密码的坑
不多说 直接上图 自己偷懒修改 admin的密码.. 结果没注意 这个地方 能够输入全角字符. 造成密码 实质上是全角的 标点符号 ... 以后一定注意一些. 里面的坑..说多了 都是浪费时间 另外 ...
- C语言版kafka消费者代码运行时异常kafka receive failed disconnected
https://github.com/edenhill/librdkafka/wiki/Broker-version-compatibility如果使用了broker版本是0.8的话, 在运行例程时需 ...
- iOS 企业账号申请证书和打包ipa
准备: 299美元的企业账号. 1.登陆苹果开发者中心: https://developer.apple.com .点击Menber Center.输入企业账号和密码登陆. 2.登陆后选择“Certi ...
- BZOJ4561 JLOI2016圆的异或并（扫描线+平衡树）
考虑一条扫描线从左到右扫过这些圆.观察某一时刻直线与这些圆的交点,可以发现构成一个类似括号序列的东西,括号的包含关系与圆的包含关系是相同的.并且当扫描线逐渐移动时,括号间的相对顺序不变.于是考虑用se ...
- linux内核分析 第六周 分析Linux内核创建一个新进程的过程
进程的描述 操作系统的三大管理功能:进程管理.内存管理.文件系统 为了管理进程,内核必须对每个进程进行清晰的描述,进程描述符提供了内核所需了解的进程信息. 进程控制块PCB task_struct:进 ...
- python之旅：面向对象的程序设计
一 面向对象的程序设计的由来 面向对象设计的由来见概述:http://www.cnblogs.com/moyand/p/8784210.html 二 什么是面向对象的程序设计及为什么要有它 面向过程的 ...