3月份端州区政府手机版遇到了一些比较特殊的需求，譬如触屏焦点图、触屏Tab切换等等的功能。

使用了各种实现方法，发现Swiper是最轻便的一个JS库：

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择。

Swiper无需加载任何公共库（如jquery）即可运行，这保证了Swiper的轻量和运行速度。

Swiper也可以在加载了公共库的环境下安全的运行，如jQuery, Zepto, jQuery Mobile等！

下面介绍一下使用方法：

1、首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。 在header前加入

1. <li><script src="{PE.SiteConfig.SkinPath/}phone/js/swiper.min.js">script>li> 
2. <li><link rel="stylesheet" href="{PE.SiteConfig.SkinPath/}phone/swiper.min.css">li> 

2、内容结构

1. <div class="infoBox J_slideMod"> 
2.         <div class="tabs"> 
3.             <a class="on">资讯a> 
4.             <a>政务a> 
5.             <a>互动a> 
6.             <a class="workbtn" data-url="">办事a> 
7.         div> 
8.  
9.         <div id="tabs-container" class="swiper-container"> 
10.  
11.             <div class="swiper-wrapper"> 
12.                      
13.                 <div class="swiper-slide"> 
14.                       
15.                     <div class="content-slide"> 
16.                         
17.             <div id="slideBox" class="slideBox"> 
18.                 <div class="swiper-wrapper"> 
19.                 {PE.Label id="手机类_通用信息列表" bindStyle="首页焦点图" imageWidth="460" imageHeight="235" outputQty="5" titleLength="26" nodes="128" picExist="true" models="1" listOrderType="20" /} 
20.                 div> 
21.                 <div class="pagination">div> 
22.             div> 
23.              
24.                         <ul class="infoList infoListA"> 
25.                             {PE.Label id="手机类_头条图文信息列表" bindStyle="自适应" nodes="128" outputQty="15" bindModel="1" topicNum="4" titleLength="100" contentLength="30" topicTitleLength="36" topicContentLength="90" usePage="false" listOrderType="3" picExist="false" /} 
26.                         ul> 
27.                         <div class="cateBtn cateBtnA">查看更多>>div> 
28.                     div> 
29.                 div> 
30.                 <div class="swiper-slide"> 
31.                     <div class="content-slide"> 
32.                         <ul class="infoList infoListB"> 
33.                             {PE.Label id="手机类_头条图文信息列表" bindStyle="自适应" nodes="150" outputQty="15" bindModel="1" topicNum="4" titleLength="100" contentLength="70" usePage="false" listOrderType="3" picExist="false" topicTitleLength="36" topicContentLength="90" /} 
34.                         ul> 
35.                         <div class="cateBtn cateBtnB">查看更多>>div> 
36.                     div> 
37.                 div> 
38.                 <div class="swiper-slide"> 
39.                     <div class="content-slide"> 
40.                         <ul class="infoList"> 
41.                             {PE.Label id="手机类_头条图文信息列表" bindStyle="自适应" nodes="166" outputQty="15" bindModel="1" topicNum="4" titleLength="100" contentLength="70" usePage="false" listOrderType="3" picExist="false" topicTitleLength="36" topicContentLength="90" /} 
42.                         ul> 
43.                         <div class="cateBtn cateBtnC">查看更多>>div> 
44.                     div> 
45.                 div> 
46.                 <div class="swiper-slide"> 
47.                     <div class="content-slide"> 
48.                         <div class="onlinebtn"> 
49.                             尊敬的用户，您可以通过点击下面的“网办大厅”按钮进入到网上办事大厅！ 
50.                             <div class="btn" data-url="">网上办事大厅div> 
51.                         div> 
52.                     div> 
53.                 div> 
54.             div> 
55.  
56.         div> 
57.     div> 

3、Swiper相关切换代码：

1. "text/javascript"> 
2. $(function() { 
3.   var mySwiper2 = new Swiper('#slideBox',{ 
4.       autoplay:5000, 
5.       visibilityFullFit : true, 
6.       loop:true, 
7.       pagination : '.pagination', 
8.   }); 
9.    
10.   var tabsSwiper = new Swiper('#tabs-container',{ 
11.     speed:500, 
12.     onSlideChangeStart: function(){ 
13.       $(".tabs .on").removeClass('on') 
14.       $(".tabs a").eq(tabsSwiper.activeIndex).addClass('on')   
15.     } 
16.   }) 
17.   $(".tabs a").on('touchstart mousedown',function(e){ 
18.     e.preventDefault() 
19.     $(".tabs .on").removeClass('on') 
20.     $(this).addClass('on') 
21.     tabsSwiper.slideTo( $(this).index() ) 
22.   }) 
23.   $(".tabs a").click(function(e){ 
24.     e.preventDefault() 
25.   }) 
26. }); 
27.