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プロパティのコードでは、タイトルと画像の属性を指定しています。画像の代わりに<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>'

私はuと同じ問題に直面しましたが、カルーセルに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 に答える