- 无需加载公用库：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);//哪个图片在加载/*contentFilmDiv = document.querySelector('#contentFilmDiv'); var ss_h = mCss(contentFilmDiv.querySelectorAll('.swiper-slide')[0],'height'); mCss(contentFilmDiv,'height',ss_h*(ss_len/2+2)); */ }, onLazyImageReady: function(swiper){//一开始自己计算容器调试了，为了延迟加载图片后更新容器的尺寸，后发现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; }
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
