Показать и скрыть div в определенный промежуток времени, используя jQuery - PullRequest
Новая
       16

Показать и скрыть div в определенный промежуток времени, используя jQuery

21 голосов
/ 27 мая 2009

Я хотел бы показать div с определенным интервалом (10 секунд) и показать следующий div, а также продолжить и повторить то же самое

**

Последовательность:

** На 10-й секунде показать div1, скрыть другие div,
Через 5 секунд Показать div 2 и скрыть другие div,
Через 5 секунд Показать div 3 и скрыть другие div,
и повторять то же самое каждые 10 секунд.

Код следует: 

<div id='div1' style="display:none;"> 
  <!-- content -->
</div>

<div id='div2' style="display:none;"> 
  <!-- content -->
</div>

<div id='div3' style="display:none;"> 
  <!-- content -->
</div>

Ответы [ 6 ]

32 голосов
/ 27 мая 2009

Рабочий пример здесь - добавьте / edit к URL для воспроизведения с кодом

Вам просто нужно использовать JavaScript setInterval function 

$('html').addClass('js');

$(function() {

  var timer = setInterval( showDiv, 5000);

  var counter = 0;

  function showDiv() {
    if (counter ==0) { counter++; return; }

    $('div','#container')
      .stop()
      .hide()
      .filter( function() { return this.id.match('div' + counter); })   
      .show('fast');
    counter == 3? counter = 0 : counter++; 

  }

});

и HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <title>Sandbox</title>
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
      <style type="text/css" media="screen">
         body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
         .display { width:300px; height:200px; border: 2px solid #000; }
         .js .display { display:none; }
      </style>
   </head>

   <body>
      <h2>Example of using setInterval to trigger display of Div</h2>
      <p>The first div will display after 10 seconds...</p>
      <div id='container'>
      <div id='div1' class='display' style="background-color: red;"> 
         div1
      </div>
      <div id='div2' class='display' style="background-color: green;"> 
         div2
      </div>
      <div id='div3' class='display' style="background-color: blue;"> 
         div3
      </div>
      <div>
   </body>

</html>

EDIT:

В ответ на ваш комментарий о контейнере div, просто измените это 

$('div','#container')

к этому 

$('#div1, #div2, #div3')
18 голосов
/ 27 мая 2009

Проходите через div каждые 10 секунд. 

$(function () {

    var counter = 0,
        divs = $('#div1, #div2, #div3');

    function showDiv () {
        divs.hide() // hide all divs
            .filter(function (index) { return index == counter % 3; }) // figure out correct div to show
            .show('fast'); // and show it

        counter++;
    }; // function to loop through divs and show correct div

    showDiv(); // show first div    

    setInterval(function () {
        showDiv(); // show next div
    }, 10 * 1000); // do this every 10 seconds    

});
7 голосов
/ 27 мая 2009

вот плагин jQuery, который я придумал: 

$.fn.cycle = function(timeout){
    var $all_elem = $(this)

    show_cycle_elem = function(index){
        if(index == $all_elem.length) return; //you can make it start-over, if you want
        $all_elem.hide().eq(index).fadeIn()
        setTimeout(function(){show_cycle_elem(++index)}, timeout);
    }
    show_cycle_elem(0);
}

Вам нужно иметь общее имя класса для всех элементов div, которые вы хотите циклически использовать, используйте его так: 

$("div.cycleme").cycle(5000)
5 голосов
/ 27 мая 2009

См. InnerFade . 

<script type="text/javascript">
    $(document).ready(

    function() {
        $('#portfolio').innerfade({
            speed: 'slow',
            timeout: 10000,
            type: 'sequence',
            containerheight: '220px'
        });
    });
</script>
<ul id="portfolio">
    <li>
        <a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html">
        <img src="images/ggbg.gif" alt="Good Guy bad Guy" />
        </a>
    </li>
    <li>
        <a href="http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html">
        <img src="images/whizzkids.gif" alt="Whizzkids" />
        </a>
    </li>
    <li>
        <a href="http://medienfreunde.com/deutsch/referenzen/printdesign/koenigin_mutter.html">
        <img src="images/km.jpg" alt="Königin Mutter" />
        </a>
    </li>
    <li>
        <a href="http://medienfreunde.com/deutsch/referenzen/webdesign/rt_reprotechnik_-_hybride_archivierung.html">
        <img src="images/rt_arch.jpg" alt="RT Hybride Archivierung" />
        </a>
    </li>
    <li>
        <a href="http://medienfreunde.com/deutsch/referenzen/kommunikation/tuev_sued_gruppe.html">
        <img src="images/tuev.jpg" alt="TÜV SÜD Gruppe" />
        </a>
    </li>
</ul>
0 голосов
/ 03 марта 2016

Вот еще один вариант решения этой проблемы, с использованием рекурсии и без использования изменяемых переменных. Кроме того, я не использую setInterval, поэтому нет необходимости в очистке.

Имея этот HTML 

<section id="testimonials">
    <h2>My testimonial spinner</h2>
    <div class="testimonial">
      <p>First content</p>
    </div>
    <div class="testimonial">
      <p>Second content</p>
    </div>
    <div class="testimonial">
       <p>Third content</p>
    </div>
</section>

Использование ES2016

Здесь вы вызываете функцию рекурсивно и обновляете аргументы. 

  const testimonials = $('#testimonials')
      .children()
      .filter('div.testimonial');

  const showTestimonial = index => {

    testimonials.hide();
    $(testimonials[index]).fadeIn();

    return index === testimonials.length
      ? showTestimonial(0)
      : setTimeout(() => { showTestimonial(index + 1); }, 10000);
   }

showTestimonial(0); // id of the first element you want to show.
0 голосов
/ 24 октября 2013

Попробуйте это 

      $('document').ready(function(){
         window.setTimeout('test()',time in milliseconds);
      });

      function test(){

      $('#divid').hide();

      }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...