1

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

4

1 回答 1

3

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

为了证明我的观点，看看结合 jQuery Mobile 的小轮播：http: //jsfiddle.net/Gajotres/wcjUk/

另外要回答您的第二个问题，当您使用 4rd 方插件时，您需要包含其 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/

这个有滑动选项，如果您在图像上滑动，它将向左或向右滚动轮播。分页已被删除。基本上现在看起来还不错。告诉我你是否还需要什么。

于 2013-07-05T08:33:43.980 回答