移动端网页触摸内容滑动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>

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