Скольжение через divs в интервале - jQuery

У меня есть список около 30 divs (см. Ниже.) И хотел бы услышать любые предложения о том, как наилучшим образом повернуть их, скользя в одном вверху и удалив один из снизу в заданное время. Что-то вроде каждые 5-10 секунд. Также, несмотря на то, что на странице 30, я хотел бы показать список из 10 и показать остальные, как упоминалось.Скольжение через divs в интервале - 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! Я должен тебе большой человек! Если я могу когда-либо сделать что-либо, чтобы отплатить за вашу помощь, пожалуйста, дайте мне знать! Мне потребовалось немного времени, чтобы разобрать нумерацию, но теперь мои divs вращаются, и щелчок паузы/воспроизведения работает как шарм! Еще раз спасибо! –

Это не особенно специфичный jQuery, но вам просто нужно использовать интервал в JavaScript.

Функция интервалов будет вызываться каждые 5 секунд.

Приведу пример. Если вы не будете делать ajax, вы, вероятно, захотите начать в нижней части своих 30 div и двигаться вверх. Таким образом, мы будем отображать divs с 20 по 29. (при условии 0-29 индексов div). Вы настроили свой html, чтобы изначально иметь

на divs 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 - немного над моей головой, но я ценю помощь. Если у вас есть более подробные объяснения, сообщите мне. –

Спасибо Tejs !!!! Ты очень помог мне! Очень ценится –

Еще один быстрый. Это может быть или не быть возможно, я не уверен. Внутри каждого div есть якорная метка. Если щелкнуть этот якорь, можно будет остановить разворот divs, пока он не будет снова нажат? Еще раз спасибо за помощь! –

Скольжение через divs в интервале - jQuery

ответ

Смежные вопросы