经典幻灯片插件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/ ...
随机推荐
- java下Mysql基本操作
https://www.cnblogs.com/centor/p/6142775.html
- 使用Fabric自动化你的任务
Fabric是一个Python库,可以通过SSH在多个host上批量执行任务.你可以编写任务脚本,然后通过Fabric在本地就可以使用SSH在大量远程服务器上自动运行.这些功能非常适合应用的自动化部署 ...
- ASP.NET MVC 1.0 参考源码索引
http://www.projky.com/asp.netmvc/1.0/System/Web/Mvc/AcceptVerbsAttribute.cs.htmlhttp://www.projky.co ...
- area point sql
UPDATE aa_info_area t,(SELECT areaId, areacenter,CONCAT('POINT(' ,substring_index(areacenter,',', 1) ...
- Nmap用法实例
<给Linux系统/网络管理员的nmap的29个实用例子> https://linux.cn/article-2561-1.html
- [转帖]认识固态：SSD硬盘内外结构解析
认识固态:SSD硬盘内外结构解析 来自: 中关村在线 收藏 分享 邀请 固态硬盘(Solid State Drive),简称固态盘(SSD),是用固态电子存储芯片阵列而制成的硬盘,由控制单元和存储单元 ...
- office2013 激活方法
1.秘钥码激活 可以淘宝上买一个. 2.KMS激活软件激活 帖子地址 http://tieba.baidu.com/p/3855281630 Office 2013 Professional Plus ...
- Java中split的对象被特殊字符(.或|)分隔
在Java中,一个String对象被一些特殊字符分隔时,可以使用split()方法,生成一个String[],然后进行其他的操作,就像下面这样: String str = "a1_b1_c1 ...
- Nginx+Tomcat搭建高性能负载均衡集群--Windows本地测试版
链接:http://www.cnblogs.com/wbyp/p/6860744.html
- BZOJ2186 SDOI2008沙拉公主的困惑（数论）
由于n!是m!的倍数,而对于每个与m!互质且小于m!的数x,x+m!.x+2*m!……也与其互质,所以答案即为(n!/m!)*φ(m!). φ(m!)=m!*∏(1-1/pi).其中的pi即为1~m中 ...