|
本帖最后由 HanSon 于 2014-12-31 20:13 编辑
由于apicloud的strollpicture实在有点蛋疼,不能跟随页面滚动,所以暂时就用swipe代替了
尽管很多地方都有说swipe的用法,但感觉对于新手来说理解还是有难度的,特别是对其进行修改
我的大部分代码来源为《玩转晋城》,也感谢他们对众多开发者的贡献
好,正题开始
傻瓜式使用swipe
首先,来看看一段HTML代码,里面的图片路径以及小标题就自己换吧
- <div id="slide" class="swipe" style="visibility: visible;">
- <div class="swipe-wrap" id="banner-content">
- <div>
- <img src="http://f.hiphotos**.**/image/pic/item/4e4a20a4462309f7bdca9423710e0cf3d7cad65d.jpg" alt="" />
- <label><div class="blur"></div>ceshi</label>
- </div>
- <div>
- <img src="http://f.hiphotos**.**/image/pic/item/4e4a20a4462309f7bdca9423710e0cf3d7cad65d.jpg" alt="" />
- <label><div class="blur"></div>ceshi</label>
- </div>
- <div>
- <img src="http://f.hiphotos**.**/image/pic/item/4e4a20a4462309f7bdca9423710e0cf3d7cad65d.jpg" alt="" />
- <label><div class="blur"></div>ceshi</label>
- </div>
- </div>
- <ul id="pointer">
- <li><a class="active"></a></li>
- <li><a></a></li>
- <li><a></a></li>
- </ul>
- </div>
复制代码 这就是一段滑动的banner代码
然后,你需要的就是加上CSS(CSS经过样式的改良,感觉会好一点点),就是附件解压那个就行了
然后,在 apiready = function() 里面,添加相关的JS代码
- function initSlide(){
- var slide = $api.byId('slide');
- var pointer = $api.domAll('#pointer a');
- window.mySlide = Swipe(slide, {
- // startSlide: 2,
- auto: 5000,
- continuous: true,
- disableScroll: true,
- stopPropagation: true,
- callback: function(index, element) {
- var actPoint = $api.dom('#pointer a.active');
- $api.removeCls(actPoint,'active');
- $api.addCls(pointer[index],'active');
- },
- transitionEnd: function(index, element) {
-
- }
- });
- }
复制代码
大功告成
|
本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册
X
|