Question

当我在我的网站上发布一些新闻或更新时，我希望显示5个最新的新闻或更新，并自动存档所有旧的，并创建新闻/ page2，news / page3等。

因为我没有使用cms我自己就像这样写新闻

<div class="news">            
    <h2>Headline</h2>
    <div class="news_text">    
        content here...
    </div>
</div>

是否有可能在动态创建的页面中自动存档新闻而不必在我写新内容时不必这样做？

Answer 1

是的，这绝对是可能的，但你可能需要放开'页面'。相反，你可以用5个组（或类似的东西）调用其他新闻项目，并将它们显示在同一页面上。

您可以使用JavaScript（或jQuery，如果您愿意）使用（或不使用）AJAX。

由于您没有CMS并且不打算制作CMS，我建议采用“简单”的jQuery方法。

伪代码看起来像：

- Hide all news items 
- Show latest five items
- Make functionality to show next
  - Etc..

<强>更新

jQuery中的函数如下所示：

toShow = 5;
i = 0;

//initial run
processNews();

//process button clicks
$('#nextItems').click(function() {
   if ((i + toShow) >= $('.news_text').length)
   {
       i = 0;
       processNews();
   }
   else
   {
       i = i + toShow;
       processNews();        
   }
});

$('#prevItems').click(function() {
   if ((i - toShow) < 0 )
   {
       i = $('.news_text').length - toShow;
       processNews();
   }
   else
   {
       i = i - toShow;
       processNews();        
   }
});

//show news items function
function processNews(){  
    $( "#display" ).empty();
    $('.news_text').hide();
    for (var j = i; j < i+toShow; j++) {
        var $new = $('.news_text:eq('+j+')');
        $('#display').add($('.news_text:eq('+j+')'));
        $new.fadeIn(400);
        // or other cool animations like:    $new.slideDown(300);
    }
};

其中toShow是您想要同时显示的新网站数（目前我显示为5）。

然后，您可以divs和buttons使用我的函数中定义的nextItems或prevItems来滚动浏览新闻。

所以你的HTML看起来像这样：

<div id="news">
    <div id="display"></div>
    <div class="news_text"><h2>Headline 1</h2> article one   </div>
    <div class="news_text"><h2>Headline 2</h2> article two   </div>
    <div class="news_text"><h2>Headline 3</h2> article three </div>
    <div class="news_text"><h2>Headline 4</h2> article four  </div>
    <div class="news_text"><h2>Headline 5</h2> article five  </div>
    <div class="news_text"><h2>Headline 6</h2> article six   </div>
    <div class="news_text"><h2>Headline 7</h2> article seven </div>
    <div class="news_text"><h2>Headline 8</h2> article eight </div>
    <div class="news_text"><h2>Headline 9</h2> article nine  </div>
    <div class="news_text"><h2>Headline 10</h2> article ten   </div>
    // etc....
</div>

<button id="prevItems">Show prev 5</button>
<button id="nextItems">Show next 5</button>

以下是该实施的DEMO。

另请注意，您可以通过$new更改新闻项之间的转换。

目前我有$new.fadeIn(400);但您也可以做其他很酷的事情，例如$new.slideDown(300);，如果您让<div id="news">的高度为auto，这看起来真的很酷。与时俱进也是如此。你可以做一些很酷的事情：）

我希望这可以帮助你。

玩得开心：）

<强>更新

如果您不希望在开始时加载所有新闻项，但在进程中：您可以像我之前谈论的那样使用AJAX加载。

例如，将processNews函数更改为此（未经测试，请注意）：

var page = 1;

//show news items function
function processNews(){  
    $( ".display" ).empty();
    for (var j = 0; j < toShow; j++) {
        $("#display").load("news/newsitems"+page+".html .news_text:eq("+j+")");
    }
};

加载在newsitems1.html页面上找到的前5个新网站，在这种情况下，在news文件夹中，必须可以从根文件夹中访问。

然后，您可以在此文件夹中创建多个html文件，并通过更改变量var page来访问它们。

我希望有所帮助。

使用jquery自动存档新闻

1 个答案: