javascript - jQuery 制作 JSON 输出幻灯片

Question

我做了一个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);
});

请查看在线样本

我可以成功获得输出，我的问题是，

如何使输出显示并一个一个循环（例如每 5 秒），就像幻灯片一样？

Answer 1

尝试

(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();
})();

演示：小提琴

Answer 2

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

$('.slider div').hide().first().show();
setInterval(
function(){
  $('.slider div:first').fadeOut().next().fadeIn().end().appendTo(".slider");}
,3000);