• 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-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="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注销就好了。

  • 相关阅读:
    代理(reGeorg)
    弱口令爆破技巧
    无法解析@NotBlank
    LC 1723. Find Minimum Time to Finish All Jobs (dp+二分)
    帝国cms 联合多张表查询
    php 根据白名单替换字符转中的链接 封装的函数
    php 正则匹配域名后的整个链接和只匹配域名
    JVM系列(一):垃圾回收之MinorGC,MajorGC和FullGC的区别
    spring事务的执行原理
    java基础系列(八):Semphore,CountDownLatch和CyclicBarrier的使用
  • 原文地址:https://www.cnblogs.com/shuman/p/3719199.html
Copyright © 2020-2023  润新知