Question

我正在jquery mobile中实现滚动标题。我在谷歌找到微小的轮播示例。很好的例子，但我在jquery mobile中需要相同的东西。有任何API存在。或者我需要添加微小的我的项目中的carousel js文件 http://baijs.nl/tinycarousel/

Answer 1

首先我会建议你不要使用微小的轮播，主要是因为它没有响应，当你使用jQuery Mobile时，你需要使用响应式插件。您的页面/应用程序需要在各种平台上运行，如果插件可以“正确匹配页面宽度”，它看起来会很糟糕。

为了证明我的观点，请看一下与jQuery Mobile相结合的小型旋转木马：http://jsfiddle.net/Gajotres/wcjUk/

另外要回答你的第二个问题，当你使用第四方插件时，你需要包含它的js和css文件。

我找到了另一种解决方案。它被称为 BxSlider ，它在您的案例标题中是响应式的，基本上它正确地覆盖了页面宽度。

以下是一个有效的例子：http://jsfiddle.net/Gajotres/5wyMh/

我甚至提出了显示/隐藏标题的解决方案，我知道你需要它;）

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" />        
        <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>  
        <script src="http://bxslider.com/lib/jquery.bxslider.js"></script>          
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header" data-position="fixed" data-fullscreen="true">
                <div class="slider">
                    <ul class="bxslider">
                        <li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li>
                        <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
                        <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
                        <li><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></li>
                        <li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li>
                        <li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li>
                    </ul></div>
            </div>

            <div data-role="content">

            </div>
        </div>    
    </body>
</html>

Javascript：

$(document).on('pagebeforeshow', '#index', function(){ 
    $('.bxslider').bxSlider({
        minSlides: 2,
        maxSlides: 2,
        slideWidth: 360,
        slideMargin: 10
    });
});

编辑：

我为你制作了新版本：http://jsfiddle.net/Gajotres/5wyMh/

此选项具有滑动选项，如果您滑动图像，它将向左或向右滚动旋转木马。分页已被删除。基本上现在它看起来很好。如果您还需要更多信息，请告诉我。

是jquery mobile + phonegap中的小小旋转木马示例

1 个答案: