间隔滑动通过div - jQuery

我有一个大约30个divs的列表（见下文），并希望听到任何关于最好的方法来通过他们在顶部滑动一个，并从中删除一个在设定的时间底部。像每5-10秒一样。此外，即使页面上有30个，我也只想显示10个列表，其余显示如上所述。间隔滑动通过div - jQuery

一个很好的例子是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>

在此先感谢您的任何帮助或想法！

来源

2010-05-17 Phillip L.

嘿......所以我模仿你的整个问题变成一个新的文件。你应该能够调整它来获取你所需要的：当你到达终点以及

<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>

该解决方案将自动打滚到列表的开头。

来源

2010-05-22 05:03:52 Tejs

Hi Tejs！我欠你大时间的男人！如果我能做任何事情来报答你的帮助，请告诉我！我花了一点时间来计算编号，但现在我的div正在旋转，暂停/播放点击就像一个魅力！再次感谢！ – 2010-05-24 01:42:46

它不是特定的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); 
    } 
}

来源

2010-05-17 19:08:08 Tejs

谢谢Tejs - 有点过头了，但我很感激帮助。如果您有更详细的解释，请告诉我。 – 2010-05-17 19:16:49

谢谢Tejs !!!!你帮了我很大的忙！非常感谢 – 2010-05-17 20:49:31

更快一个。这可能或不可能，我不确定。每个div内都有一个锚标签。如果点击此锚点，可以阻止div滑动直到再次点击？再次感谢您的帮助！ – 2010-05-17 21:08:02

间隔滑动通过div - jQuery

回答

相关问题