【技术贴】swipe.js的简单用法

HanSon

由于apicloud的strollpicture实在有点蛋疼，不能跟随页面滚动，所以暂时就用swipe代替了

尽管很多地方都有说swipe的用法，但感觉对于新手来说理解还是有难度的，特别是对其进行修改

我的大部分代码来源为《玩转晋城》，也感谢他们对众多开发者的贡献

好，正题开始


傻瓜式使用swipe

首先，来看看一段HTML代码，里面的图片路径以及小标题就自己换吧

1. <div id="slide" class="swipe" style="visibility: visible;">
   
2.                             <div class="swipe-wrap" id="banner-content">
   
3.                                     <div>
   
4.                                                 <img src="http://f.hiphotos**.**/image/pic/item/4e4a20a4462309f7bdca9423710e0cf3d7cad65d.jpg" alt="" />
   
5.                                             <label><div class="blur"></div>ceshi</label>
   
6.                                     </div>
   
7.                                     <div>
   
8.                                                 <img src="http://f.hiphotos**.**/image/pic/item/4e4a20a4462309f7bdca9423710e0cf3d7cad65d.jpg" alt="" />
   
9.                                             <label><div class="blur"></div>ceshi</label>
   
10.                                     </div>
    
11.                                     <div>
    
12.                                                 <img src="http://f.hiphotos**.**/image/pic/item/4e4a20a4462309f7bdca9423710e0cf3d7cad65d.jpg" alt="" />
    
13.                                             <label><div class="blur"></div>ceshi</label>
    
14.                                     </div>
    
15.                             </div>
    
16.                             <ul id="pointer">
    
17.                                     <li><a class="active"></a></li>
    
18.                                     <li><a></a></li>
    
19.                                     <li><a></a></li>
    
20.                             </ul>
    
21.                         </div>

复制代码

这就是一段滑动的banner代码

然后，你需要的就是加上CSS（CSS经过样式的改良，感觉会好一点点），就是附件解压那个就行了

然后，在 apiready = function() 里面，添加相关的JS代码

1. function initSlide(){
   
2.             var slide = $api.byId('slide');
   
3.             var pointer = $api.domAll('#pointer a');
   
4.             window.mySlide = Swipe(slide, {
   
5.               // startSlide: 2,
   
6.               auto: 5000,
   
7.               continuous: true,
   
8.               disableScroll: true,
   
9.               stopPropagation: true,
   
10.               callback: function(index, element) {
    
11.                 var actPoint = $api.dom('#pointer a.active');
    
12.                 $api.removeCls(actPoint,'active');
    
13.                 $api.addCls(pointer[index],'active');
    
14.               },
    
15.               transitionEnd: function(index, element) {
    
16.                
    
17.               }
    
18.             });
    
19.         }

复制代码

大功告成