0

出于某种原因，我的画廊无法在包括 iPad 在内的移动设备上运行，但在桌面上运行良好。所有的图像都显示为堆叠的，而不是允许用户点击。我的网站的链接。代码位于此处

// 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));
4

1 回答 1

0

查看您的代码后，语法有很多错误。我已经尽我所能清理它们，这应该可以帮助你。

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

例如，该区域缺少分号（无法调用 findElements 函数，因为 JS 将直接跳到没有分号的下一行。）

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

通过 linter 运行您的代码，它将大大改善您的语法结构，并确保不会遗漏分号、逗号和括号等错误。

编辑：好的，查看您的代码后，这实际上是由于您的 allmobile.css 文件中的 !importants 造成的。宽度和高度设置为 max-width: 100% （这会破坏它，因为滑块的工作方式是将画廊尽可能远离屏幕）和高度自动（这会破坏它，因为它允许图像继续堆积）。一旦你为页面删除了这些，它会变得更好并且实际工作。

于 2013-08-07T15:59:20.147 回答