使用javascript间隔显示html上帖子数组的某些帖子

时间:2016-03-07 07:00:30

标签: javascript jquery html

我有一个对象数组作为输入

function showPosts(results, noOfPosts){

                    if(currentPost!=noOfPosts){
                        if(params.detail) {
                        var dtStr = "-";//format(dt);
                        $("#container").addClass("details");
                        $("#container").append('<div class="post"><div class="title">'+results[currentPost].title+'<i>'+dtStr+'</i></div><div class="content">'+results[currentPost].content.extended+'</div></div>');
                        countPost++;
                    } else {
                        $("#container").append('<div class="post"><span class="title">'+results[currentPost].title+'</span> - '+results[currentPost].content.brief+'</div>');
                        countPost++;
                        }
                    }
                    else
                        countPost=0;
                        $("#container").removeClass("class");


                }

                setInterval(function(){
                    showPosts(results, noOfPosts)
                },3000)

我必须以3秒的间隔一次只显示3个帖子,假设输入有8个帖子,那么它应该先显示3个,然后显示3个然后是2个,然后再返回3个帖子等等。

我试过这个:

public class DefaultRegistry : Registry
{
    public DefaultRegistry() {
        Scan(
            scan => {
                scan.Assembly("MyAssembly");
                scan.WithDefaultConventions();
            });

        For<IContext<SomeClass>>().Use<MyContext>();
    }
}

1 个答案:

答案 0 :(得分:0)

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
var results=[
    {
        "title": "Sample Post",
        "content": {
          "brief": "<p>This is my brief content</p>",
          "extended": "<p>Here is the detail</p>"
        }
      },
    {
        "title": "Post 6",
        "content": {
          "brief": "<p>Brief for Post 6</p>",
          "extended": "<p>Full description for Post 6</p>"
        }
      },
      {
        "title": "Post 7",
        "content": {
          "brief": "<p>Brief for Post 7</p>",
          "extended": "<p>Full description for Post 7</p>"
        }
      },
      {
        "title": "Post 8",
        "content": {
          "brief": "<p>Brief for Post 8</p>",
          "extended": "<p>Full description for Post 8</p>"
        }
      },
    {
        "title": "Post 1",
        "content": {
          "brief": "<p>Brief for post 1</p>",
          "extended": "<p>Full description&nbsp;for post 1</p>"
        }
      },
      {
        "title": "Post 2",
        "content": {
          "brief": "<p>Brief&nbsp;for post 2</p>",
          "extended": "<p>Full description&nbsp;for post 2</p>"
        }
      },
      {
        "title": "Post 222",
        "content": {
          "brief": "<p>Brief&nbsp;for post 3</p>",
          "extended": "<p>Full description&nbsp;for post 3</p>"
        }
      },
    {
        "title": "Post 113",
        "content": {
          "brief": "<p>Brief&nbsp;for post 3</p>",
          "extended": "<p>Full description&nbsp;for post 3</p>"
        }
      },
    {
        "title": "Post 223",
        "content": {
          "brief": "<p>Brief&nbsp;for post 3</p>",
          "extended": "<p>Full description&nbsp;for post 3</p>"
        }
      }
];
var currentPost = 0;
var noOfPosts = 3;
var startIndex=0;
var endIndex= noOfPosts+startIndex-1;
function showPosts(results, noOfPosts){
        $("#container").innerHTML="";
    $("#container").addClass("details");
    for(var i=startIndex;i<endIndex+1;i++){     
        $("#container").append('<div class="post"><div class="title">'+results[i].title+'</div><div class="content">'+results[i].content.extended+'</div></div>');

    }
}

setInterval(function(){
    showPosts(results, noOfPosts);
    startIndex =(endIndex==(results.length-1))?0:endIndex+1;
    endIndex =((noOfPosts+startIndex)>results.length)? endIndex = results.length-1 :noOfPosts+startIndex-1;

},3000);
</script>
</head>
<body>

<div id="container"></div>


</body>
</html>