经典幻灯片插件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/ ...
随机推荐
- Unity发布Exe后，去掉提示分辨率的窗口
Unity版本:2017.4 菜单File->Build Settings...,修改如下图的位置,将“Display Resolution Dialog”从Enabled改为Disabled
- Alpha阶段敏捷冲刺②
1.提供当天站立式会议照片一张 每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 昨天已完成的工作. 购买云服务器 注册账号 界面布局初步规划 今天计划完成的工作. 界面雏 ...
- wpf后台设置颜色（背景色，前景色）
有时候你是不是也会遇到要在wpf后台给某个控件设置背景色或者给文字设置前景色的情况? 本人最近看到一个从自定义的combobox读取系统字体和颜色的实例,该实例实现了随字体combobox选项改变而改 ...
- 服务 在初始化安装时发生异常:System.IO.FileNotFoundException: 未能加载文件或******
这个问题是在用installutil.exe安装服务时候碰到的 解决方法就是把installutil.exe文件直接复制到要安装的目录下 installutil.exe的所在位置 windows/mi ...
- windows多线程（二） 等待线程返回
多线程编程中,有时我们需要等待某一线程完成了特定的操作后再继续做其他事情,要实现这个目的,可以使用Windows API函数WaitForSingleObject,或者WaitForMultipleO ...
- Sysprep错误一则
准备搭建一台基于Windows2008的域控,通过ISO文件装完系统后,照例使用Windows Update打全了补丁.同时,考虑到经常使用Powershell,所以手动再装上了PS5.1 .因为准备 ...
- 微信小程序 功能函数 密码验证*
//登录输入密码 userPasswordInput: function (e) { var that = this; this.setData({ userPassword: e.detail.va ...
- MySQL 5.6 & 5.7最优配置文件模板
Inside君整理了一份最新基于MySQL 5.6和5.7的配置文件模板,基本上可以说覆盖90%的调优选项,用户只需根据自己的服务器配置稍作修改即可,如InnoDB缓冲池的大小.IO能力(innodb ...
- linux下怎么修改grub.cfg
一.grub2的启动配置文件grub.cfggrub2的启动配置文件grub.cfg是/boot/grub/grub.cfg,而不是以前的memu.lst.如果你是多系统,有Ubuntu和window ...
- Day24-part1-原生Ajax
参考老师博客:http://www.cnblogs.com/wupeiqi/articles/5703697.html 主要讲了:发数据的3种方式以及上传文件的3种方式.(后续需要总结) 一,原生Aj ...