0

我正在为台式机和平板电脑视图构建响应式设计。在这个设计中，我使用一个或多个带有jQ​​uery Cycle2的幻灯片构建。此幻灯片包含桌面 3 个滑块中的对象和平板电脑版本中的 2 个。

我的方法：我正在检查窗口调整大小事件，解开所有循环标题，将新标题包装在给定数量的元素周围，然后重新启动循环插件。

我的问题：一切正常，直到我尝试重新启动循环插件。如果没有任何失败或其他东西，它就无法正常工作。所以只是重新初始化似乎是问题所在。

我的代码：

//function to fire the resize event when its done
var delay = (function(){
    var timer = 0;
    return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
    };
})();

$(window).resize(function() {
    delay(function(){
        if( window.innerWidth <= 979 ){
            resizeWrapper( 2 );
        }
    }, 500);
});

//function for delete wrappers and wrap new ones based on a given number
function resizeWrapper( numberOfItems ){
    $( '.productsItem' ).unwrap();

    var $set_latestProductsCycle = $( '#latestProductsCycle' ).children();
    for( var i=0, len = $set_latestProductsCycle.length; i < len; i+=numberOfItems ){
        $set_latestProductsCycle.slice( i, i+numberOfItems ).wrapAll( '<div class="popularProductsWrapper"/>' );
    }
    $( '#latestProductsCycle' ).cycle({
        fx: 'scrollHorz',
        prev: '#latestProductsButtonLeft',
        next: '#latestProductsButtonRight',
        timeout: 0,
        caption: '.popularProductsWrapper'
    });
}

感谢帮助。

4

1 回答 1

3

自己回答问题：

当您第一次调用循环脚本时，我忘记删除将创建的哨兵容器。此外，当我重新启动循环容器时，不需要定义“标题”。

简而言之，该函数应如下所示：

    function resizeWrapper( cycleContainer, numberOfItems ){
    $( cycleContainer ).cycle( 'destroy' );
    $( cycleContainer + ' .cycle-sentinel' ).remove();

    $( cycleContainer + ' .slider .item' ).unwrap();

    var $set_latestProductsCycle = $( cycleContainer ).children();

    for( var i=0, len = $set_latestProductsCycle.length; i < len; i+=numberOfItems ){
        $set_latestProductsCycle.slice( i, i+numberOfItems ).wrapAll( '<div class="slider"/>' );
    }

    $( cycleContainer ).cycle({
        fx: 'scrollHorz',
        prev: cycleContainer + 'Prev',
        next: cycleContainer + 'Next',
        timeout: 0
    });
}

感谢大家的关注。

于 2013-02-06T15:48:04.317 回答