Question

我有一个大约30个div的列表（见下文。），并希望听到有关通过在顶部滑动一个并在设定时间从底部移除一个旋转它们的最佳方法的任何建议。每5-10秒就有一次。即使页面上有30个，我也只想显示10个列表，其余部分如上所述。

一个很好的例子是www.foursquare.com和他们最近的活动部分。我想做同样的事情，除了使用预定数量的div而不是实时使用ajax。

非常感谢任何建议或一些帮助指明我正确的方向。

<div class="recent-questions">

<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>

<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>
<div class="recent-question"></div>

</div>

提前感谢任何帮助或想法！

Answer 1

特定于jQuery并不特别，但您只需要在JavaScript中使用间隔。

function shiftDivs()
{
    $('div:last').remove();
    $('div:first').before(myNewDivElement); // Pseudo
}

setInterval(function()
{
    shiftDivs();
}, 5000);

间隔功能将每5秒调用一次。

我举一个例子。如果你不会做ajax，你可能想要从你的30个div的底部开始并向上移动。所以我们将显示div 20到29.（假设0-29 div指数）。你设置你的html最初有

style="display:none"

在div 0-19上。然后，您使用此代码：

var headIndex = 19;
var intervalId = null;

$(document).ready(function()
{
     intervalId = setInterval(function()
     {
         shiftDivs();

         if(headIndex == -1)
            clearInterval(intervalId);
     }, 5000);
});

function shiftDivs()
{
    $($('div')[headIndex]).slideDown();
    $($('div')[headIndex + 10]).slideUp();
    headIndex--;
}

其他暂停示例：

function pauseShift()
{
    if(intervalId != null) // Currently Not Paused
    {
         clearInterval(intervalId);
    }
    else // Paused
    {
         ShiftDivs(); // Only include this if you want the shift to occur immediately on resume
         intervalId = setInterval(function()
         {
             shiftDivs();

             if(headIndex == -1)
                clearInterval(intervalId);
         }, 5000);
    }
}

Answer 2

嘿那里......所以我把你的整个问题建模成了一个新文件。你应该能够调整它以获得你需要的东西：

<html>
  <head>
    <title>Shift Test</title>
    <style>
       .recentQuestion { border: 1px solid blue; height: 50px; width: 150px; }
    </style>
    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  </head>
  <body>
     <div style="overflow: hidden; height: 250px;">
     <div class="recentQuestion" id="div0" style="display: none;">
        This is some content 0.
     </div>
     <div class="recentQuestion" id="div1" style="display: none;">
        This is some content 1.
     </div>
     <div class="recentQuestion" id="div2" style="display: none;">
        This is some content 2.
     </div>
     <div class="recentQuestion" id="div3" style="display: none;">
        This is some content 3.
     </div>
     <div class="recentQuestion" id="div4" style="display: none;">
        This is some content 4.
     </div>
     <div class="recentQuestion" id="div5" style="display: none;">
        This is some content 5.
     </div>
     <div class="recentQuestion" id="div6" style="display: none;">
        This is some content 6.
     </div>
     <div class="recentQuestion" id="div7" style="display: none;">
        This is some content 7.
     </div>
     <div class="recentQuestion" id="div8" style="display: none;">
        This is some content 8.
     </div>
     <div class="recentQuestion" id="div9" style="display: none;">
        This is some content 9.
     </div>
     <div class="recentQuestion" id="div10" style="display: none;">
        This is some content 10.
     </div>
     <div class="recentQuestion" id="div11" style="display: none;">
        This is some content 11.
     </div>
     <div class="recentQuestion" id="div12" style="display: none;">
        This is some content 12.
     </div>
     <div class="recentQuestion" id="div13" style="display: none;">
        This is some content 13.
     </div>
     <div class="recentQuestion" id="div14" style="display: none;">
        This is some content 14.
     </div>
     <div class="recentQuestion" id="div15">
        This is some content 15.
     </div>
     <div class="recentQuestion" id="div16">
        This is some content 16.
     </div>
     <div class="recentQuestion" id="div17">
        This is some content 17.
     </div>
     <div class="recentQuestion" id="div18">
        This is some content 18.
     </div>
     <div class="recentQuestion" id="div19">
        This is some content 19.
     </div>
     </div>

     <br/>
     <br/>
     <br/>

     <div style="border: 1px solid red; height: 30px; width: 200px;">
         <a href="javascript:void(0);" id="pauseShifting">Pause / Resume</a>
     </div>

     <script type="text/javascript" language="javascript">
       var intervalId = null;
       var indicesToShow = new Array();

       $(document).ready(function()
       {
          indicesToShow.push(15);
          indicesToShow.push(16);
      indicesToShow.push(17);
      indicesToShow.push(18);
      indicesToShow.push(19);

      intervalId = setInterval(function()
      {
          shiftDivs();
      }, 2000);

      $('#pauseShifting').click(function()
      {
          if(intervalId != null)
          {
             clearInterval(intervalId);
             intervalId = null;
          }
          else
          {
              shiftDivs();
              intervalId = setInterval(function()
              {
                 shiftDivs();
              }, 2000);
          }
      });
   });

   function shiftDivs()
   {
       var newSetOfImages = new Array();

       if(indicesToShow[0] == 0)
       {
          newSetOfImages.push(15);
          newSetOfImages.push(16);
          newSetOfImages.push(17);
          newSetOfImages.push(18);
          newSetOfImages.push(19);

          for(var j = 0; j < 5; j++)
          {
             $('#div' + indicesToShow[j]).slideUp('fast');
             $('#div' + newSetOfImages[j]).slideDown('fast');
          }

          indicesToShow = newSetOfImages;
          return;
       }
       else
          newSetOfImages.push(indicesToShow[0] - 1);

       newSetOfImages.push(indicesToShow[0]);
       newSetOfImages.push(indicesToShow[1]);
       newSetOfImages.push(indicesToShow[2]);
       newSetOfImages.push(indicesToShow[3]);

       $('#div' + indicesToShow[4]).slideUp('fast');
       $('#div' + newSetOfImages[0]).slideDown('fast');

       indicesToShow = newSetOfImages;
   }
 </script>
  </body>
</html>

当您到达目的地时，此解决方案将自动滚动到列表的开头。

以间隔滑动div - jQuery

2 个答案: