swipe js bug

最近因为要写新的mobile site页面,有好几个页面上面必须用到photo slider。

使用插件:

/*
 * Swipe 2.0
 *
 * Brad Birdsall
 *
Copyright 2013, MIT License
 *
*/

Github:https://github.com/thebird/Swipe

在使用的时候,发现只要是在两张照片的情况下,你会在chrome的F12调试中的Elements选项中发现swipe js使用js动态创建出来了4个div,这里是使用如下的代码:


 1  <div id=‘mySwipe‘ style=‘max-width:500px;margin:0 auto;padding-top:0px;‘ class=‘swipe‘>
2 <div class=‘swipe-wrap‘>
3 __(foreach from=$all_content_information item=content_information)__
4 __(if $content_information.content_type == "image")__
5 <div>
6 <img src="__($host_application_prefix)____($content_information.fields.image.value)__" style="width:100%;height:280px;" />
7 </div>
8 __(/if)__
9 __(/foreach)__
10   </div>
11 </div>

那个调试的就不截图了,但是你使用Ctrl+u查看源代码就会发现源代码中的图片数是正确的。所以模板当中不存在条件判断失误的问题了,只能是在swipe
js中出现问题。

于是,顺藤摸瓜,打开swipe.js文件后,如果在Line 47-Line 53就发现了那一段在处理两张图片时候的代码。


 1 //Source codes:
2 if (browser.transitions && options.continuous && slides.length < 3) {
3 element.appendChild(slides[0].cloneNode(true));
4 element.appendChild(element.children[1].cloneNode(true));
5 slides = element.children;
6 }
7
8 //Modified codes:
9
10 //special case if two slides
11 if (browser.transitions && options.continuous && slides.length < 3) {
12 //element.appendChild(slides[0].cloneNode(true));
13 //element.appendChild(element.children[1].cloneNode(true));
14 //slides = element.children;
15 }

不想知道根源的,只需要将那个if注销就好了。

时间: 2024-10-27 19:26:50

swipe js bug的相关文章

swipe.js 轻松实现手机端滑动效果

插件下载地址 官网:http://www.swipejs.comgithub:https://github.com/bradbirdsall/Swipe 插件特色 swipe.js是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚动间隔,返回回调函数等.经常可见使用在移动开发中 使用方法 HTML代码如下: <div id='slider' class='swipe'> <div class='swipe-wrap'> <div>

移动端的内容滑块js库 swipe.js

swipe.js 是一个轻量级的移动端内容滑块,类似于pc端的slide.js,用于实现轮播广告或其他内容滑动模块 ,支持移动端屏幕滑动手势操作.此库不依赖于任何其他的js库,可独立使用 使用swipe.js时只需将下载好的文件引用到页面,然后在页面中写好对应的结构 <div id="slider" class="swipe"> <div class="swipe-wrap"> <div></div>

js bug自动预警

这两天在看关于AMD中getCurrentScript函数时,突然想到,既然可以检测出当前出错的js文件,那么是不是可以做一个自动js bug预警的功能.以后只要有js错误出现,就会自动将错误上传到服务器. 先看司徒正美大大书中写的一段关于检测js文件地址的函数,相关博客地址点这: function getCurrentScript(base) { // 参考 https://github.com/samyk/jiagra/blob/master/jiagra.js var stack; try

swipe JS – 移动WEB页面内容触摸滑动类库

swipe.js文档及用法 今天带来一个轻量级js触摸滑动类库-swipe JS,这是一个非常小的一个javascript类库,但他的功能却不简单,它可以用来展示web页面上的任何内容,支持精确的触摸移动操作,而且还可以设置自动播放.等比例缩放等等实用性的功能: 一.用法 Swipe只需添加很简单的一段代码即可,如下 <div id='slider' class='swipe'> <div class='swipe-wrap'> <div class='wrap'>&l

移动web最简洁的滑动效果Swipe JS(适合初学者)

最近要做一个移动web的项目,前端后端都自己一人来搞.由于之前一直是做后端的开发,没涉及过前端的开发,甚是无从下手,但又不得不去弄,于是乎,先把w3school上前端相关的html.js.css都预览了一遍,然后在仿照别人的站点自己尝试着去实现. 虽然很多人都是前台很简单,没啥搞的(至少像我做后台的那些同事这么认为),但是真正开始弄起来,还是有些困难的,要做到美观易用,更得下工夫研究里面的所以然. 以下是我要实现一个在手机上滑动(图片,文字等)的效果.我先是把别人的页面下载下来,然后根据它的在页

移动端触摸滑动插件swipe.js

插件特色 swipe.js是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚动间隔,返回回调函数等.经常可见使用在移动前端开发中. 使用方法 下面是一个比较简单的使用例子,添加适当的HTML代码和js代码即可. <div id='slider' class='swipe'> <div class='swipe-wrap'> <div></div> <div></div> <div>

Swipe.js支持网页点击和数字导航

Swipe.js是一个移动端的滑动插件,使用手指触摸滑动,并且支持左右导航,详情请访问之前的一篇文章介绍:Swipe.js. 但却不支持网页版的点击跳转和数字导航,这些需要你自己添加的,之前本来是想使用这个在前端开发中的,最后发现没有这个功能,最近我又开始折腾了一下,发现原来也可以用在桌面版中,只不过需要自己额外添加一些代码.并且支持IE6.支持自适应设计,不需要jquery,一下子感觉好赞. 首先添加插件的路径,然后添加以下js代码: var mySwipe = Swipe(document.

前端插件--swipe.js

swipe.js的作用: 这是一个轻量级的移动滑动组件,支持触摸移动,支持响应式页面. 效果图: 代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 }

swipe.js实现支持手拔与自动切换的图片轮播

一.Html代码如下: <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'> <div class='swipe-wrap'> <li style="no-repeat center center; list-style-type: none;"><img src="/1.jpg" /></li> <li styl