0

http://andrebrov.net/dev/carousel/

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

      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 >

在上面的value属性代码中，我们给出了title和image属性。是否有可能我们可以将<div>部分作为输入而不是图像，以便我们可以将一些文本消息添加到图像或其他内容中。请帮忙。

4

3 回答 3

4

在你的轮播模板中写

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

并在轮播值中写入

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

我遇到了和你一样的问题，但能够在轮播中添加 div。:)

于 2012-09-11T13:54:57.530 回答
0

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

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

于 2012-05-17T15:33:00.267 回答
0

如果您想更改它，我查看了小部件代码，如果您查看 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"}
于 2012-05-17T20:24:13.610 回答