经典幻灯片插件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/ ...
随机推荐
- SqlServer中的dbo是什么意思
出处:http://andylin02.iteye.com/blog/486296 SqlServer中的dbo是什么意思? DBO是每个数据库的默认用户,具有所有者权限,即DbOwner 通过用DB ...
- git常用命令复习及其基本使用示例
年后回来新上到项目,对于git的一些操作命令记得有点混乱了,所以特整理笔记如下: 一.git常用命令复习 查看当前分支:git branch (显示结果中带有*号的是当前分支)查看所有分支: git ...
- selenium获取新页面标签页（只弹出一个新页面的切换）
selenium获取新页面标签页(只弹出一个新页面的切换) windows = driver.current_window_handle #定位当前页面句柄 all_handles = driver. ...
- TestNG+Excel+(HTTP+JSON) 简单接口测试
说明: 1.使用Exce作为数据存放地: 2.使用TestNG的Datarprovide 做数据供应: 3.不足的地方没有指定明确的result_code , error_code , ERROR_M ...
- 笔记之分布式文件系统（DFS）
不知何故,老外都挺喜欢使用DFS,但是国内公司用这个的不多.一个具体的需求就是,备份服务器在国外,所以启用DFS把国内的数据同步一份到国外进行备份.最近有机会接触DFS,把一些心得体会记录一下. 1. ...
- BugScan插件编写高(gǎo)级(jī)教程
声明:本文最先发布在:http://q.bugscan.net/t/353 转载请注明出处 有问题可以和我交流 邮件(Medici.Yan@gmail.com) 个人博客地址:http://www.c ...
- 相见恨晚的 scala - 01 [ 基础 ]
简洁到不行,多一个分号都是不应该. 学习笔记: centOS 下安装 scala 和安装 jdk 一毛一样 . 1 . 不同于 Java 的变量声明 :( 但是和 js 很像 ) /** * Crea ...
- Java的checked exception与unchecked exception
在Java中exception分为checked exception和unchecked异常,两者有什么区别呢? 从表象来看, checked异常就是需要在代码中try ... catch ...的异 ...
- [USACO12NOV]同时平衡线Concurrently Balanced Strings DP map 思维
题面 [USACO12NOV]同时平衡线Concurrently Balanced Strings 题解 考虑DP. \(f[i]\)表示以\(i\)为左端点的合法区间个数.令\(pos[i]\)表示 ...
- SpringBoot之使用jpa/hibernate
Springboot版本是2.1.3.RELEASE 1.依赖 List-1.1 <dependency> <groupId>org.springframework.boot& ...