本文介绍Swiper3的主要特性和使用方法，包括无需依赖公共库、触摸滑动、动态DOM监测等，并通过一个电影图片切换的示例展示了如何配置和初始化Swiper。
- 无需加载公用库：Swiper无需加载任何公共库（如jquery）即可运行，这保证了Swiper的轻量和运行速度。Swiper也可以在加载了公共库的环境下安全的运行，如jQuery, Zepto, jQuery Mobile等。
- 1:1的触摸滑动：Swiper默认的触摸比例为1:1，你可以通过修改Swiper的设置来改变这个比例。
- 监视器：Swiper3 增加了开启监视器的选项，有了这个功能Swiper可以在你动态改变DOM或Swiper的样式时自动重新初始化并计算所需的元素。
- 丰富的API：Swiper 拥有丰富的API，他允许你建立自己独特的分页器、导航、视差滚动、或其他精彩的效果
- 真正支持RTL(从右向左)布局：Swiper是唯一一个支持100%RTL布局的滑动插件。
- 多行slides布局：Swiper允许多行Slides布局，这样每行的slide就会较少。
- 过渡效果：增加了三种新的过渡效果：淡入、3D方块、3D流。
- 两种控制方式：现在Swiper可以用来控制其他的Swiper，甚至可以同时控制。
- 完整的导航控制：Swiper带有所有常用的导航控制器，包括分页器，切换箭头，滚动条。
- Flexbox布局：Swiper使用流行的flexbox布局，这样就解决了很多计算尺寸方面的问题。这种布局也允许用CSS来设定Slides。
- Flexbox网格(伸缩布局)：你可以在Swiper初始化的时候设定slide的显示，包括每行、每列、每组数量以及他们的间距等。
- 其他的特性：Swiper3还包含了所有swiper2的牛逼功能，包括自适应、滚动反弹、抵抗反弹、loop模式、嵌套Swiper。
看了这么多Swiper的兼容、独立、可操作性等功能特性，真是移动端（现在也支持PC端的拖放事件了）开发的中利器之一，开始吸星大法学习他。
1. Swiper使用方法
a) 首先加封swiper.min.js脚本和swiper.min.css文件（废话）
b) 如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。
c) 加段html代码
d) 初始化Swiper：最好是挨着</body>标签
上示例，我用swiper.js 和 zepto.js 做了个小的电影图片切换，功能在一点一点儿的加，有缺点请大家指出来，我会虚心向大家学习：
文件有：
css 文件夹 / index.css
dist 文件夹 / css 文件夹 / swiper.min.css
/ js 文件夹 / swiper.js、zepto.min.js
/ zepto_lib / touch.js
其中只有 index.html 和 index.css 是自己写的，其他文件是第三方CSS、JS库（版本：Swiper 3.4.0，Zepto v1.1.6）。
index.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Swiper Example from henry</title>
<link href="dist/css/swiper.min.css" rel="stylesheet" />
<link href="css/index.css" rel="stylesheet" />
<style>
.swiper-container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="top"> <!-- 左侧logo -->
<div class="top_logo"></div> <!-- 右侧 小导航 或 外链 -->
<div class="top_right">
<a class="link_text" href="#">APP下载</a>
<a class="link_text" href="#">关于</a>
<a class="link_text" href="#">社区</a>
</div>
</div>
<!--导航栏 tab menu list 可横向拖动，点击tab可切换页面 内容-->
<nav>
<div class="nav_inner">
<div class="nav_list swiper-container-horizontal" id="swiper-container-tab">
<div class="swiper-wrapper">
<a href="#" class="slide-a" target="_self"><span class="nav-item active-nav" data-category="-1">最新</span></a>
<a href="#" class="slide-a" target="_self"><span class="nav-item" data-category="-2">广播</span></a>
<a href="#" class="slide-a" target="_self"><span class="nav-item" data-category="-3">推荐</span></a>
<a href="#" class="slide-a" target="_self"><span class="nav-item" data-category="-4">新闻</span></a>
<a href="#" class="slide-a" target="_self"><span class="nav-item" data-category="-5">综艺</span></a>
<a href="#" class="slide-a" target="_self"><span class="nav-item" data-category="-6">更多1</span></a>
<a href="#" class="slide-a" target="_self"><span class="nav-item" data-category="-7">更多2</span></a>
<a href="#" class="slide-a" target="_self"><span class="nav-item" data-category="-8">更多3</span></a>
<a href="#" class="slide-a" target="_self"><span class="nav-item" data-category="-9">更多4</span></a>
<a href="#" class="slide-a" target="_self"><span class="nav-item" data-category="-10">更多5</span></a>
<a href="#" class="slide-a" target="_self"><span class="nav-item" data-category="-11">END</span></a>
</div>
</div>
</div>
</nav>
</div>
<!--主体内容-->
<div id="main">
<!--内容页面 1-->
<div class="swiper-container swiper-container-h" id="tab1">
<div class="swiper-wrapper">
<div class="swiper-slide" data-hash="tab1">
<!-- tab content -->
<div class="swiper-container swiper-container-v contentFilm">
<div class="swiper-wrapper" id="contentFilmDiv">
<!-- 电影图片列表 -->
</div>
<div class="swiper-scrollbar"></div>
</div>
</div>
<!-- tab2 -->
<div class="swiper-slide" data-hash="tab2">
<!-- tab content -->
slide2
</div>
<!-- tab3 -->
<div class="swiper-slide" data-hash="tab3">
slide3
</div> <div class="swiper-slide" data-hash="tabN"> ......
</div
</div>
</div>
</div>
<div class="downloadTip" id="downloadTip" style="display: block;">
<div class="downloadBG"></div>
<div class="downloadContent">
<div class="download_LO">
<img src="./images/download_logo.png">
<div class="downTest">
<p>安装My APP</p>
<p>观看VSSS视频更流畅</p>
</div>
<a class="downloadBtn" href="#">免费安装</a>
<div class="downLoadClose" id="downLoadClose"></div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="dist/js/swiper.js"></script>
<script src="dist/js/zepto.min.js"></script>
<script src="dist/js/zepto_lib/touch.js"></script>
<script type="text/javascript">
document.ontouchmove=function(e){e.preventDefault();};
window.onload = function(){
//-----------------------------------
LoadFilms();
//----------------------------------- //使用zepto.js里的tap 和 click 事件绑定（保证移动端和桌面端都支持点击）. 注: zepto.js 提供基本功能，但tap这种的屏幕事件需要实际使用时另外加载（touch.js）
$('#downloadTip').on('tap click',function(e){e.preventDefault();});
$('.downLoadClose').on('tap click',function(e){
document.querySelector('#downloadTip').style.display = 'none';
e.preventDefault();//避免 点透
});
$('.downloadBtn').on('tap click',function(e){
window.location.href = '#';
});
};
function handleResponse(response){
var ss_html = new StringBuffer();
var ss_len = 0;
$.each(response,function(index, item){
ss_html.append('<div class=\"swiper-slide\">');
ss_html.append( '<a href=\"'+item.href+'\">');
ss_html.append( '<img class=\"swiper-lazy\" data-src=\"'+item.img+'\" alt=\"'+item.name+'\" />');
ss_html.append( '<p class=\"video_title swiper-no-swiping\">'+item.name+'</p>');
ss_html.append( '<div class=\"swiper-lazy-preloader\"></div>');
ss_html.append( '</a>');
ss_html.append('</div>');
ss_len++;
});
var contentFilmDiv = document.querySelector('#contentFilmDiv');//这里暂时用ID做的动态绑定film list，后期我感觉还得用类名做绑定（根据从服务端读取的电影列表信息，绑定到指定的tab content）
contentFilmDiv.innerHTML = ss_html.toString();
//===================================================================================
//tab menu
var swiper_init_h = {
direction: 'horizontal',
spaceBetween: 0,
speed: 500,
//longSwipesRatio : 0.5,//触发swiper所需要的最小拖动距离比例, 值越大触发Swiper所需距离越大。最大值0.5
touchAngle : 10,//允许触发拖动的角度值。默认45度，即使触摸方向不是完全水平也能拖动slide。
/*swiper可以嵌套。
nested 用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换。请将子swiper的nested设置为true。由于需要在slideChangeEnd时判断作用块，因此快速滑动时这个选项无效。 在做 横向swiper 内嵌 纵向swiper 时，发现有横纵向在一起的情况下会有冲突 我这里发现了个BUG, 是有纵向时横向不能拖动了！
试了几次屏蔽总不成功，后用了swiper.js 的nested:true解决了这个问题。 */
nested: true,
preventClicks: true,//默认为true，当swiping时阻止意外的链接点击
preventClicksPropagation: true,//阻止click冒泡。拖动Swiper时阻止click事件
hashnav: true, //URL hash link
hashnavWatchState: true,
onSlideChangeStart: function(swiper){//切换Tab导航菜单CSS
//var arrNavListItem = $('.nav_list .nav-item')||null; arrNavListItem.eq(swiper.previousIndex).removeClass('nav_on'); arrNavListItem.eq(swiper.activeIndex).addClass('nav_on');
$("#swiper-container-tab .active-nav").removeClass('active-nav');
var activeNav = $("#swiper-container-tab .slide-a").eq(swiper.activeIndex).addClass('active-nav');
}
};
//film list （tab content 里的 电影列表swiper事件参数设置）
var swiper_init_v = {
scrollbar: '.swiper-scrollbar',
direction: 'vertical',
spaceBetween : 0, //slider 与 slider 之间的间隔距离
//preventClicks: true,//默认为true，当swiping时阻止意外的链接点击
preventClicksPropagation: true,//阻止click冒泡。拖动Swiper时阻止click事件
slidesPerView: 'auto',
watchSlidesVisibility: true,
mousewheelControl: true,
grabCursor : true,
freeMode: true,
//autoHeight: true, //高度随内容变化
preloadImages:false,
//updateOnImagesReady: true,//当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化。使用此选项需要先开启preloadImages: true
//图片延迟加载 功能
lazyLoading: true,// Enable lazy loading
//lazyLoadingInPrevNext: true,
lazyLoadingOnTransitionStart: true, //激发没有加载的图片加载
lazyLoadingInPrevNextAmount: 4, //提前加载图片的数量，没感觉到这里的数量有变化
onLazyImageLoad: function(swiper, slide, image){
//alert('延迟加载图片');
//console.log(swiper);//Swiper实例
//console.log(slide);//哪个slide里面的图片在加载
//console.log(image);//哪个图片在加载
/* //一开始自己计算容器调试了，为了延迟加载图片后更新容器的尺寸，后发现swiper.js有自己的更新方法 swiper.updateSlidesSize(); //延迟加载图片后更新容器的尺寸
swiper.updateContainerSize();
swiper.updateSlidesSize();
}
};
var swiperV = new Swiper('.swiper-container-v', swiper_init_v);//创建film list (direction: vertical)的swiper
var swiperH = new Swiper('.swiper-container-h', swiper_init_h);//创建tab content (direction: horizontal)的swiper
//tab menu
var swiperTab = new Swiper('#swiper-container-tab', {
watchSlidesProgress: true, //这两个属性是为了与 tab menu 同步切换用的
watchSlidesVisibility: true,
slideClass: 'slide-a', //这里用自定义的类 slide-a 取代了 slide的默认类 .slide （swiper.js还是挺人性化的）
slidesPerView: 1, //一次显示一个slide content 这是针对 tab content (direction: horizontal)的
grabCursor : true,
freeMode: true, //tab menu 电影分类 横向列表，分类多了超宽时，可自由拖动 onTap: function(swiper, e){//swiper 自己定义的tap事件
if(swiper.clickedIndex!=swiperH.activeIndex) {//加个判断,避免重复点击同一tab menu
swiperH.slideTo(swiper.clickedIndex);//根据当前点击有Tab index切换 内容显示区
}
else {
return;
}
} //用JSONP方式从其它网站获取JSON数据信息
function hInitJSONP(src){
var script = document.createElement("script");
script.src = src;
document.body.insertBefore(script, document.body.firstChild);
}
function LoadFilms(){ //从远程、非同域的服务器 加载 b.json 文件
hInitJSONP("http://www.xxx.com/json/b.json?callback=handleResponse"); //注：这里的URL是假的，我是想试一试JSONP的，想要真的自己找个服务器和域名/IP 试
/*我在服务端加了个静态的json文件保存film list的内容信息，内容大致如下：（内容不多，挺简单的） handleResponse([ { name:'足球专辑', img:'./images/1.jpg', href:"m-video.html" },
{ name:'流星时代', img:'./images/2.jpg', href:"m-video.html" },
{ name:'电视热剧', img:'./images/3.jpg', href:"m-video.html" },
{ name:'最新影片', img:'./images/4.jpg', href:"m-video.html" },
{ name:'2016中国', img:'./images/5.jpg', href:"m-video.html" },
{ name:'LiveShow', img:'./images/6.jpg', href:"m-video.html" },
{ name:'美少女', img:'./images/7.jpg', href:"m-video.html" }, { ...... } ]); */
}//end function
</script>
<script>//用于拼接string串的，比用 加号 "+" 拼接string串效率要高
function StringBuffer(){this._string = new Array;}
StringBuffer.prototype.append = function(str){this._string.push(str);};
StringBuffer.prototype.toString = function(){return this._string.join("");};
/*
用于处理CSS属性的读 和 写 的通用函数
读：两个参数mCss(element,attr) 获取当前元素对应的attr样式 返回值 number
写：三个参数mCss(element,attr,val) 设置当前元素对应的attr样式，不用加单位（px、deg、无单位）
*/
function mCss(element, attr , val){
if(attr=='scale'|| attr=='rotate'|| attr=='rotateX'|| attr=='rotateY'|| attr=='rotateZ'|| attr=='scaleX'|| attr=='scaleY'|| attr=='translateY'|| attr=='translateX'|| attr=='translateZ'){
return setTransform(element, attr , val);
}
if(arguments.length == 2){
var val = element.currentStyle?element.currentStyle[attr]:getComputedStyle(element)[attr];
if(attr=='opacity'){
val = Math.round(val*100);
}
return parseFloat(val);
} else {
switch(attr){
case 'width':
case 'height':
case 'paddingLeft':
case 'paddingTop':
case 'paddingRight':
case 'paddingBottom':
case 'borderWidth':
case 'borderLeftWidth':
case 'borderRightWidth':
case 'borderTopWidth':
case 'borderBottomWidth':
val = val < 0 ? 0 : val;
case 'left':
case 'top':
case 'marginLeft':
case 'marginTop':
case 'marginRight':
case 'marginBottom':
element.style[attr] = val +"px";
break;
case 'opacity':
element.style.filter= "alpha(opacity:"+val+")";
element.style.opacity= val/100;
break;
default:
element.style[attr]=val;
}
}
}
function setTransform(element,attr,val){
if(!element["transform"]){
element["transform"] = {};
}
if(typeof val == "undefined"){
val = element["transform"][attr];
if(typeof val == "undefined"){
val = 0;
element["transform"][attr] = 0;
}
return val;
} else {
var str = "";
element["transform"][attr] = val;
for(var s in element["transform"]) {
switch(s){
case 'rotate':
case 'rotateX':
case 'rotateY':
case 'rotateZ':
str += s+"("+element["transform"][s]+"deg) ";
break;
case 'translateX':
case 'translateY':
case 'translateZ':
str += s+"("+element["transform"][s]+"px) ";
break;
default:
str += s+"("+element["transform"][s]+") ";
}
}
element.style.MozTransform = element.style.msTransform = element.style.WebkitTransform = element.style.transform = str;
}
}
</script>
index.css的代码：
@-ms-viewport {
width: device-width;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
/* clearfix */
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
zoom:1;
}
img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
ol, ul {
list-style: none;
}
html {
height: 100%;
font-size: 100%; background:#f7f7f7;
}
body {
position: relative;
background-color: #fff;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
-ms-touch-action: none;
font-family: Arial, Helvetica, sans-serif;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
font-size: 14px;
}
#wrap{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#header {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
}
#header .top {
position: relative;
background: #68c5ff;
color: #fff;
line-height: 2.75rem;
height: 2.75rem;
width: 100%;
display: -webkit-box;
display: box;
-webkit-box-pack: start;
box-pack: start;
-webkit-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#header .top_logo {
width: 79.5px;
height: 100%;
margin-left: 10px;
background-image: url("../images/header_logo.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
#header .top_right {
position: absolute;
right: 0;
top: 0;
}
#header .top_center {
-webkit-box-flex: 1;
}
#header .link_text {
margin-right: 10px;
font-size: 14px;
font-weight: bold;
color: white;
}
#header .nav_inner {
overflow: hidden;
/*
overflow-x: scroll;
overflow-y: hidden;
*/
-webkit-overflow-scrolling: touch;
-moz-overflow-scrolling: touch;
background-color: #f7f7f7;
border-bottom: 1px solid #d2d2d2;
height: 34px;
}
#header .nav_list {
white-space: nowrap;
}
#header .nav_list a.slide-a {
white-space: nowrap;
display: inline-block;
padding: 0 10px;
color: #6a7989;
text-decoration: none;
font-size: 13px;
height: 27px;
line-height: 26px;
margin: 5px 0px 5px 5px;
}
#header .nav_list .nav_on, #header .nav_list .active-nav {
border-bottom: 2px solid #1daffc;
color: #1daffc;
}
.selected {
color: #68c5ff;
}
.selected:after {
position: absolute;
bottom: 0px;
left: 0px;
content: "";
width: 100%;
height: 2px;
margin: auto;
/*border-radius: 2px;*/
background-color: #68c5ff;
background-repeat: repeat-x;
}
#main {
position: absolute;
top: 79px;
right: 0;
left: 0;
bottom: 0;
overflow: hidden;
}
.contentFilm{ /*swiper-container*/
position:absolute;
top: 5px;
right: 0px;
left: 0;
bottom: 0; /*50px;*/
}
.contentFilm>.swiper-wrapper{
position: relative;
display: -webkit-block;
display: -moz-block;
display: -ms-block;
display: -webkit-block;
display: block;
width: 100%; max-width:100%;
height: auto;
}
.contentFilm .swiper-slide{
width: 50%;
height: auto;
float: left;
box-sizing: border-box;
margin-bottom: 5px;
}
.contentFilm .swiper-slide a {
display: block;
margin-left: 2px;
}
.contentFilm .swiper-slide img {
display: inline-block;
width: 100%;
background-position:center center;
background-size: cover;
}
.contentFilm>.loading {
display: none;
text-align: center;
line-height: 24px;
color: #999;
padding: 10px 0;
}
#footer {
position: absolute;
right; 0;
bottom: 0;
left: 0;
width:100%;
overflow: auto;
}
#footer .copyright {
position: relative;
border-top: 1px solid #d2d2d2;
background-color: #f7f7f7;
height: 50px;
width: 100%;
text-align: center;
font-size: 10px;
color: #5b5b5b;
}
#footer .crt {
margin: 6px auto;
}
#downloadTip {
position: fixed;
bottom: 0px;
width: 100%;
height: 45px;
display: none;
max-width: 640px;
z-index: 999;
}
#downloadTip .downloadBG {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.6;
background-color: black;
}
#downloadTip .downloadContent {
position: relative;
height: 45px;
line-height: 45px;
vertical-align: middle;
width: 100%;
}
#downloadTip .downLoadClose {
float: left;
width: 12px;
height: 20px;
margin-left: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("../images/close_btn.png");
position: absolute;
right: 5px;
top: 1px;
}
#downloadTip .downloadLogo {
width: 158.5px;
float: left;
height: 100%;
margin-left: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("../images/download_logo.png");
}
#downloadTip .downloadBtn {
position: absolute;
right: 33px;
top: 9.5px;
width: 75px;
height: 26px;
line-height: 26px;
text-align: center;
border-radius: 20px;
background-color: white;
font-size: 12px;
color: #5b5b5b;
}
#downloadTip .download_LO img {
WIDTH: 38px;
float: left;
}
#downloadTip .download_LO {
padding: 7px;
color: #fff;
display: inline-block;
}
#downloadTip .downTest {
float: left;
font-size: 0.75rem;
line-height: 17px;
}
扫一扫
1722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
