1

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

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

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

目前我正在使用这个进行测试：

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

我想要做的是终止幻灯片并重新加载它，以便循环内部函数 + CSS 将考虑新的屏幕尺寸。（我知道-所以window.onorientationchange再次这只是为了测试）。

我要么想知道如何完全阻止幻灯片运行，以便我可以再次启动它，要么就获得更好方法的建议。

这可能没什么帮助，但这里有一个 JS Fiddle http://jsfiddle.net/yhNgh/

4

2 回答 2

2

你应该使用销毁：

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

顺便说一句，您应该使用超时来消除一些 resize 方法：

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);
    };

});
于 2013-06-06T11:16:42.577 回答
1

我重新阅读了您的帖子，试试这个jQuery - 如何等待“调整大小”事件的“结束”然后才执行操作？ 

 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

于 2013-06-06T11:19:17.897 回答