2

使用 Jquery mobile 时出现 Nivoslider 图像动画问题。

我希望幻灯片显示在多个页面上。当我在第 1 页和第 2 页之间来回单击时，图像显示为隐藏，然后向下滑动并按原样显示。该问题仅有时会发生，并且似乎与幻灯片之间的停顿有关。

当设置 NivoSlider 选项“manualAdvance：true”时，问题就解决了。理想情况下，我希望将此设置为 false，以便幻灯片是自动的。

不确定这是 CSS 问题还是 JS 问题？

在这里演示：http://www.fando.com.au/jqm/demo_jqm.html

我使用 JQM pagechange 功能尝试重置每个页面上的幻灯片：

$(document).on("pagechange", function() {
            $('[data-role="page"] #slider').nivoSlider({
                    effect: 'fade',                 // Specify sets like: 'fold,fade,sliceDown'
                    animSpeed: 500,                 // Slide transition speed
                    pauseTime: 4000,                // How long each slide will show
                    pauseOnHover: false,            // Stop animation while hovering
                    manualAdvance: false,           // Force manual transitions
                    startSlide: 0,
                });
    });

在这个错误上花费了太长时间，非常感谢任何帮助。请参阅下面与 nivo 滑块演示代码密切相关的完整代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="/jqm/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/jqm/themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/jqm/themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/jqm/themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/jqm/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/jqm/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" data-title="Title" id="page1">
    <ul>
        <li><a href="/jqm/demo_jqm.html#page1" >page 1</a></li>
        <li><a href="/jqm/demo_jqm.html#page2" >page 2</a></li>
    </ul>
    <div class="theme-default">
        <div id="slider"> <img src="/jqm/black_rock_property.jpg" alt="" /> <img src="/jqm/beaumaris_property.jpg" alt="" /> </div>
    </div>
</div>
</div>
<div data-role="page" data-title="Title" id="page2">
    <ul>
        <li><a href="/jqm/demo_jqm.html#page1" >page 1</a></li>
        <li><a href="/jqm/demo_jqm.html#page2" >page 2</a></li>
    </ul>
    <div class="theme-default">
        <div id="slider"> <img src="/jqm/black_rock_property.jpg" alt="" /> <img src="/jqm/beaumaris_property.jpg" alt="" /> </div>
    </div>
</div>
</div>
<script type="text/javascript" src="/jqm/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(document).on("pagechange", function() {
            $('[data-role="page"] #slider').nivoSlider({
                    effect: 'fade',                 // Specify sets like: 'fold,fade,sliceDown'
                    animSpeed: 500,                 // Slide transition speed
                    pauseTime: 4000,                // How long each slide will show
                    pauseOnHover: false,            // Stop animation while hovering
                    manualAdvance: false,           // Force manual transitions
                    startSlide: 0,
                });
    });
</script>
</body>
</html>
4

1 回答 1

0

看起来在渲染新页面时，它采用了错误的高度。你能指定滑块的高度吗？

让我知道这是否有帮助；）

于 2014-02-28T09:13:45.023 回答