Question

上面的链接显示了一些使用轮播的幻灯片示例。

      var carousel  = new $.widgets.Carousel( {

            uuid : "carousel",

            args : { "scrollInterval" : 600,"itemWidth":290
            },
                value : [
                        { "title" : "Tron.Legacy",
                          "image" : "images/1.jpg"
                        },
                        { "title" : "Yogi Bear",
                          "image" : "images/2.jpg"
                        },
                        { "title" : "The Chronicles of Narnia: The Voyage of the Dawn Treader",
                          "image" : "images/3.jpg"
                        },
                        { "title" : "The Fighter",
                          "image" : "images/4.jpg"
                        },
                        { "title" : "Tangled",
                          "image" : "images/5.jpg"
                        }
                ]
            });                   
    </script >

在值属性的上述代码中，我们提供标题＆amp; 图片属性。我们是否有可能提供＆lt; div＆gt; 部分作为输入而不是图像，以便我们可以将某些文字消息添加到图像或其他任何内容。请帮忙。

Answer 1

在您的轮播模板中写

<div style="height:100%;font-size:1.5em;width:500px">@{div}</div>

并在carousel值中写

"title" : "Tron.Legacy",
"image" : "images/1.jpg",
"div": '<div id="page1">first</div>'

我遇到了与你相同的问题，但能够在旋转木马中添加div。：）

Answer 2

Twitter Bootstrap项目有一个轮播，可以接受div和你想要使用的任何标记。

http://twitter.github.com/bootstrap/javascript.html#carousel

Answer 3

如果你想改变它，我查看了小部件代码，如果你看一下carousel.js的这一部分：

this.applyTemplate = function(obj, _t) {
    for (var i in obj) {
        var token = "@{" + i + "}";
        while (_t.indexOf(token) != -1) {
            _t = _t.replace(token, obj[i]);
        }
    }
    return _t;
};

特别注意var token = "@{" + i + "}";

因为在html代码中有这一部分：

<div class="carousel-item">
    <div style="height:2em;font-size:1.5em;padding-bottom:15px;">@{title}</div>
    <div id="carousel_item_@{id}" >
        <div style="float:left;width:100%"><img src="@{image}" /></div>                                                 
    </div>
</div>

如果你注意到@ {image}，@ {title}是标题和图片属性。因此，只需浏览代码，我就会假设您的文本将替换为html中的“@ {something}”。所以你可以添加一个“@ {something}”，然后在你的对象中添加一个属性：

{"something":"caption to add",
 "title":"blah",
 "img":"blah.jpg"}

jQuery mobile中的旋转木马

3 个答案: