移动端网页触摸内容滑动js插件Swiper的使用（项目总结）

首先这是一个不错的移动端网页触摸内容滑动js插件，以前的时候很少用到这样的插件，又丰富了知识，Swiper一个非常不错的插件

<div class="swiper-container"
4000
>
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="theme/css/images/home/banner2.jpg">
</div>
<div class="swiper-slide"><img src="theme/css/images/home/banner1.jpg">
</div>
<div class="swiper-slide"><img src="theme/css/images/home/banner.jpg"></div>
</div>
<div class="swiper-pagination"></div>
</div>

//banner
var mySwiper = new Swiper('.swiper-container', {
loop: true,
autoplay: 3000,
pagination: '.swiper-pagination'
});

看Swiper 的api文档很容易看懂的，关键还是靠平时的积累。

loop英文意思是环形的意思，如果设置为true的话，就是循环播放的意思。

autoplay英文意思是自动播放，也就是自动播放和自动滑动的间隔时间为3000微秒

pagination: '.swiper-pagination'

<divclass="swiper-pagination"></div>

就是控制图片滑动下方的几个小点

var mySwiper = new Swiper('.swiper-container', {
loop: true,
autoplay: 3000,
pagination: '.swiper-pagination'
});

其中有很多配置选项，可以根据Swiper 的api文档配合自己的需求进行添加。

// 在用angular开发h5页面的时候又用到了，所以就把angular中怎么用的也总结下来

html 页面

<div class="notice">
公告
<div class="notice_container swiper-container" ng-show="news.length>0">
<div class="swiper-wrapper">
<div class="swiper-slide" ng-repeat="index in news" ui-sref="noticeDetail({id:index.id})">
<span>{{index.title}}</span>
</div>
</div>
</div>
</div>
<ion-content class="home_content">
<div class="banner_content">
<div class="banner_box swiper-container"  ng-show="banner.length>0">
<div class="swiper-wrapper">
<div class="swiper-slide" ng-repeat="index in banner" ui-sref="{{index.link}}">
<img ng-src="{{index.src}}" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</ion-content>

js页面

starter.controller("homeCtrl", function ($scope,$timeout,httpSvc) {
var params = {
notice_type: 01 ,
query_begin_line: 1,
query_num:100,
head_tran_code: "S40001"
}
$scope.banner=[{src:'../img/banner.png',link:'funds'},{src:'../img/banner.png',link:'funds'},{src:'../img/banner.png',[b]link:'funds'}];
$scope.news=[];
httpSvc.post("/system/sysNoticeListS",params).then(function(data){
console.log(data,data.respBody.list[0])
var timestamp = Date.parse(new Date());
for (var i = 0; i < data.respBody.list.length; i++) {
var endStamp=Date.parse(moment(data.respBody.list[i].notice_effcenddate+data.respBody.list[i].notice_effcendtime, "YYYYMMDDHHmmss").format())
if (endStamp>timestamp) {
$scope.news.push({
id:data.respBody.list[i].notice_serno,
title:data.respBody.list[i].notice_title
})
}
}
})
$timeout(function(){
var banner = new Swiper('.banner_box',{
loop: true,
observer:true,
loopAdditionalSlides:2,
autoplay:3000,
pagination:'.swiper-pagination',
paginationClickable :false,
autoplayDisableOnInteraction : true
});
var notic = new Swiper('.notice_container',{
loop: true,
observer:true,
direction:'vertical',
loopAdditionalSlides:2,
autoplay:3000,
paginationClickable :false,
autoplayDisableOnInteraction : true
});
},100);
})

其中第一个是公告轮播，第二个是轮播图，所以是有区别的，这也是我为什么总结下来的原因，第一个公告轮播的时候，是直接在

swiper-slide中定义的，不需要定义，其他的区别不大。所以要灵活运用

<div class="swiper-pagination"></div>