Question

我在响应式移动设计中使用jQuery循环时遇到了问题。

使用CSS我可以在页面加载时正确显示它，但是一旦循环加载，它就不再响应，因为所有内容都有固定的宽度。因此，在用户从portait更改为横向模式的情况下，循环不会调整大小。

（我知道这会在调整大小时触发一百万次并且不是最好的方法 - 它只是用于测试）。

目前我正在测试使用它：

window.onresize = function (event) {
    jQuery('#slideshow').cycle('pause');
    jQuery('#slideshow').cycle({
        fx: 'scrollHorz',
        timeOut: '4000'
    });

我要做的是杀死幻灯片并重新加载它，以便循环内部函数+ css将考虑新的屏幕大小。（我知道window.onorientationchange-再一次这只是为了测试）。

我或者想要知道如何完全杀死幻灯片，这样我就可以再次启动它，或者获得更好的方法建议。

这可能没什么帮助，但这里是一个JS小提琴http://jsfiddle.net/yhNgh/

Answer 1

你应该使用destroy：

$('#slideshow').cycle('destroy');

顺便说一下，你应该使用超时对debize方法进行一点调整：

http://jsfiddle.net/yhNgh/1/

jQuery(document).ready(function () {

    jQuery('#slideshow').cycle({
        fx: 'scrollHorz',
        timeOut: '4000'
    });
    var resizeTimeout;
    window.onresize = function (event) {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function () {
            jQuery('#slideshow').cycle('destroy');
            jQuery('#slideshow').cycle({
                fx: 'scrollHorz',
                timeOut: '4000'
            });
        }, 50);
    };

});

Answer 2

我重新阅读了您的帖子，试试这个jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?

 var rtime = new Date(1, 1, 2000, 12,00,00);
 var timeout = false;
 var delta = 200;
 $(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        alert('Done resizing');
    }               
}

另一个不错的链接（来自stackoverflow线程） http://forum.jquery.com/topic/the-resizeend-event

如何完全停止jQuery循环函数的运行（不是暂停/恢复）

2 个答案: