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

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

<div class="swiper-container">    <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>

//bannervar 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',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>