Показать и скрыть divs в определенный промежуток времени с помощью jQuery

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

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

** На 10-й второй шоу див1, скрыть другие дивы,
После 5seconds интервала Показать DIV 2 и скрытие другие divs,
Через 5 секундный интервал Показать div 3 и скрыть другие divs,
и повторить то же самое каждые 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>

источник

2009-05-27 Webrsk

Working Example здесь - добавить /редактировать к URL, чтобы играть с кодом

Вам просто нужно использовать JavaScript setInterval функцию

$('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')

источник

2009-05-27 10:29:40

Russ Спасибо за быстрый ответ на сообщение. В вашем примере это показывает, что у нас должен быть контейнер div, и нам нужно иметь другие divs. Но мои divs не находятся внутри контейнера, который он разделяет. как изменить код соответственно? – Webrsk

У вас есть доступ к изменению HTML? Если это так, я бы предложил обернуть divs в контейнер div для контекста и простоты выбора. Без контейнера div, код нужно будет изменить, чтобы выбрать только те divs, о которых идет речь, т.е. divs с идентификаторами 1, 2 и 3. Теперь я обновлю свой ответ –

У меня есть смысл, я могу иметь его в контейнере div для улучшения ясность. Russ скажите мне, можем ли мы показать еще один div (named: div_sub1) во время отображения div1 и впоследствии. Будет ли сохранен тот же код? – Webrsk

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

источник

2009-05-27 10:25:17

Приятный и простой плагин! – TruMan1

Loop через дивы каждые 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  

});

источник

2009-05-27 10:38:06

. Есть ли способ изменить макет, показать div1, а затем показать div2 и показать div1 одновременно. Итак, когда div2 приходит, он показывает div1 и div2? –

здесь плагин 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.cycleme").cycle(5000)

источник

2009-05-27 10:39:12 duckyflip

Попробуйте

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

     function test(){ 

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

     }

источник

2013-10-24 07:42:09 jool

He res другой принимает эту проблему, используя рекурсию и без использования изменяемых переменных. Кроме того, im не использует setInterval, так что theres no cleanup это должно быть сделано.

Имея этот 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.

источник

2016-03-03 12:41:54 stormpat

Показать и скрыть divs в определенный промежуток времени с помощью jQuery

ответ

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