Question

由于某些原因，我的画廊不在iPad等移动设备上工作，在桌面上工作正常。所有图像都显示为堆叠，而不是允许用户点击。我的网站link。代码是位于here

// scroll gallery init
function initCarousel() {
var isTouchDevice = /MSIE 10.*Touch/.test(navigator.userAgent) || ('ontouchstart' in    window) || window.DocumentTouch && document instanceof DocumentTouch;
jQuery('div.view-gallery').scrollGallery({
    mask: 'div.frame',
    slider: '>ul',
    slides: '>li',
    btnPrev: 'a.btn-prev',
    btnNext: 'a.btn-next',
    pagerLinks: '.pagination li',
    circularRotation: false,
    autoRotation: false,
    switchTime: 3000,
    animSpeed: 500,
    onInit: function(obj){
        obj.resizeFlag = true;
        obj.win = jQuery(window);
        //obj.win.unbind('resize orientationchange load', obj.onWindowResize);
        obj.resizeSlides = function(){
            obj.slideOffset = obj.slides.eq(0).outerWidth(true) -   obj.slides.eq(0).width();
            if(!obj.resizeFlag) obj.slides.css({width: ''});
            else obj.slides.css({width: obj.mask.width()/2 - obj.slideOffset});
            obj.calculateOffsets();
            obj.refreshPosition();
            obj.refreshState();
        }
        if(isTouchDevice){
            ResponsiveHelper.addRange({
                '..767': {
                    on: function(){
                        setTimeout(function(){
                            obj.resizeFlag = true;
                            obj.resizeSlides();
                            obj.win.bind('resize  orientationchange load', obj.resizeSlides);
                        }, 100);
                    }
                },
                '768..': {
                    on: function(){
                        obj.resizeFlag = false;
                        obj.win.unbind('resize orientationchange  load', obj.resizeSlides);
                        obj.resizeSlides();
                    }
                }
            });
        }
    }
});
jQuery('.scrollable-gallery').scrollableGallery();
}

/*
 * scrollableGallery
 */
 ;(function($) {
function ScrollableGallery(options) {
    this.options = {
        scrollableArea: '.frame',
        listItems: '.list-items',
        btnPrev: '.btn-prev',
        btnNext: '.btn-next',
        animSpeed: 500
    }
    $.extend(this.options, options);
    this.init();
}
ScrollableGallery.prototype = {
    init: function() {
        this.findElements()
        this.setStructure();
        this.addEvents();
    },
    findElements: function() {
        this.holder = $(this.options.holder);
        this.scrollableArea = this.holder.find(this.options.scrollableArea);
        this.listItems = this.scrollableArea.find(this.options.listItems);
        this.items = this.listItems.children();
        this.lastItem = this.items.last();
        this.btnPrev = this.holder.find(this.options.btnPrev);
        this.btnNext = this.holder.find(this.options.btnNext);

        this.scrollAPI = new jcf.modules.customscroll({
            replaces: this.scrollableArea[0]
        });
    },
    setStructure: function() {
        var that = this;

        if (that.listItems.css('position') === 'static') {
            that.listItems.css('position', 'relative');
        }
        setTimeout(function() {
            that.refreshState();
        }, 50);
    },
    refreshState: function() {
        this.listItems.css('width', 32700);
        this.listItems.css('width', this.lastItem.position().left +   this.lastItem.outerWidth(true) + 1);
        this.scrollableArea.add(this.scrollableArea.parent()).css({
            width: '',
            height: ''
        });
        this.scrollAPI.refreshState();
    },
    addEvents: function() {
        var that = this;

        that.btnPrev.bind('click', function(e) {
            e.preventDefault();
            that.prevSlide();
        });
        that.btnNext.bind('click', function(e) {
            e.preventDefault();
            that.nextSlide();
        });

        win.bind('resize orientationchange load', function() {
            that.refreshState();
        });
    },
    nextSlide: function() {
        var that = this;
        var curPos = this.scrollableArea.scrollLeft();
        var pos;

        for (var i = 0; i < that.items.length; i++) {
            pos = that.items.eq(i).position().left;
            if (pos > curPos) {
                that.scrollAnimate(curPos, pos);
                break;
            }
        }
    },
    prevSlide: function() {
        var that = this;
        var curPos = this.scrollableArea.scrollLeft();
        var pos;

        for (var i = that.items.length - 1; i >= 0; i--) {
            pos = that.items.eq(i).position().left;
            if (pos < curPos) {
                that.scrollAnimate(curPos, pos);
                break;
            }
        }
    },
    scrollAnimate: function(from, to) {
        var that = this;
        var start = new Date().getTime();

        setTimeout(function() {
            var now = (new Date().getTime()) - start;
            var progress = now / that.options.animSpeed;
            var result = (to - from) * progress + from;
            that.scrollAPI.hScrollBar.scrollTo(result);
            if (progress < 1) {
                setTimeout(arguments.callee, 10);
            } else {
                that.scrollAPI.hScrollBar.scrollTo(to);
            }
        }, 10);
    }
}

var win = $(window);

$.fn.scrollableGallery = function(options) {
    return this.each(function() {
        if (!$(this).data('ScrollableGallery')) {
            $(this).data('ScrollableGallery', new   ScrollableGallery($.extend({}, {holder: this}, options)));
        }
    });
}
}(jQuery));

Answer 1

查看代码后，语法出现了很多错误。我尽可能地清理它们，这应该可以帮到你。

http://jsfiddle.net/wvWrY/1/

例如，这个区域缺少一个分号（无法调用findElements函数，因为JS只会跳转到下一行而没有分号。）

init: function() {
    this.findElements()
    this.setStructure();
    this.addEvents();

通过linter运行你的代码，它将极大地改善你的语法结构，并确保很少遗漏错误，如分号和逗号，括号不会被省略。

编辑：好的，看了你的代码，看来这实际上是由于你的allmobile.css文件中的！importants。宽度和高度设置为最大宽度：100％（这会打破它，因为滑块的工作方式是尽可能远离屏幕扩展图库）和高度自动（这会打破它，因为它允许图像只是继续打桩）。删除页面后，它会变得更好，实际上可以正常工作。

图库无法在iPad /移动设备上运行

1 个答案: