0

JSテンプレートを作りました

<div class="slider">
    <script id="jstemplate" type="js/template">
        <div class="items">
            <span class="name"> {{name}} </span> :  <span class="address">{{address}}</span> 
        </div>
    </script>
</div>

とそれぞれの JSON オブジェクト

var JSONObject  = [
    {
        name: 'Nyonya', 
        address: '199 Grand Street New York, NY 10013, United States'
    },
    {
        name: 'Mulberry Project', 
        address: '149 Mulberry Street New York, NY 10013, United States'
    },
    {
        name: 'Sweet & Vicious', 
        address: '5 Spring Street New York, NY 10012, United States'
    },
],

template = $.trim($('#jstemplate').html());

$.each(JSONObject, function(i,v){
    var temp =  template.replace( /{{name}}/ig, v.name)
                .replace( /{{address}}/ig, v.address);
    console.log(temp);
    $('.slider').append(temp);
});

オンラインサンプルをご覧ください

出力を正常に取得できます。私の質問は、

スライドショーのように、出力を表示して 1 つずつ (たとえば 5 秒ごとに) ループさせるにはどうすればよいですか?

4

2 に答える 2

2

試す

(function() {
    var JSONObject = [{
        name : 'Nyonya',
        address : '199 Grand Street New York, NY 10013, United States'
    }, {
        name : 'Mulberry Project',
        address : '149 Mulberry Street New York, NY 10013, United States'
    }, {
        name : 'Sweet & Vicious',
        address : '5 Spring Street New York, NY 10012, United States'
    }], template = $.trim($('#jstemplate').html());

    var $ct = $('.slider');
    $.each(JSONObject, function(i, v) {
        var temp = template.replace(/{{name}}/ig, v.name).replace(
            /{{address}}/ig, v.address);
        $(temp).hide().appendTo($ct);
    });

    function x(){
        var $item = $ct.children('.items').first().stop().fadeIn().delay(3000).fadeOut(function(){
            $(this).appendTo($ct);
            x();
        })
    }
    x();
})();

デモ:フィドル

于 2013-08-21T11:28:19.157 に答える
1

http://jsfiddle.net/F98zF/8/

$('.slider div').hide().first().show();
setInterval(
function(){
  $('.slider div:first').fadeOut().next().fadeIn().end().appendTo(".slider");}
,3000);
于 2013-08-21T11:30:59.603 に答える