问题描述: islider无法触发点击事件,pinchzoom的放大缩小功能与 islider左右滑动功能冲突






解决方案:





问题1思路:

查看islider插件源代码


发现endHandler事件以及moveHandler事件采用了阻止冒泡 这两处去除冒泡事件即可成功触发点击事件  问题1解决





问题2思路:

pinchzoom和islider的事件冲突导致放大的效果无法达成,此处查看pinckzoom源代码

其实现原理为 在初始化类元素外创造包裹层,并给初始化元素赋予各类定位以及形变属性,所以需要将初始化元素定义到islider元素的最外层,其次在切换时图片如果放大,则第二张图片轮播切换时也会放大,此处核心解决代码如下:



    var islider2 = new iSlider({

        type: 'dom',

        data: picList_big,

        dom: document.getElementById("big_slider"),

        // duration: 2000,

        animateType: 'card',

        // isAutoplay: true,

        isLooping: true,

        // isVertical: true, 是否垂直滚动

        // animateType: 'default',  

        animateType: 'overspread',

        onslidechange: function (idx) {

            // console.log(idx);

            // $('.picNum_now').html(idx+1);

            // nowCarouselNum=idx;

            setTimeout(function(){

                $('#big_slider').css('transform','scale(1, 1) translate(0, 0)')

            },1000);

        }

    });


我的思路为监听切换事件 手动重新赋值transform值,这个方法的不足为当图片再次切换时会闪一次原来的尺寸,看此插件代码,引起这原因的是updata函数,暂无更优思路。于是厚颜求助插件作者


有待优化……

Created with the Personal Edition of HelpNDoc: Easily create EPub books