Форум

externuz · #1 (**permalink**) 07.03.2014, 09:20

Ребят, есть вот такой код:

$(document).ready(function () {
    $('#item1').hide();
    $('#item2').hide();
    $('#item3').hide();
    $('#item4').hide();

    var i = 1;
    Reload();

    function Reload() {
        $('#item' + i).fadeIn().delay(2000).fadeOut();
        i = i + 1;
        Reload();
    }
})

При проигрывании - показывается и прячется первый див, затем анимация останавливается. Если убрать i = i + 1, будет циклически показываться и прятаться первый див. Пробовал и через циклы for, while - ситуация аналогичная.

Как мне реализовать мою задачу? Нужно циклически показывать слайдеры в порядке: 1, 2, 3, 4, 1, 2, 3 ...

рони · #2 (**permalink**) 07.03.2014, 10:44

externuz,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div{
    width: 100px;
    height: 100px;
    position: absolute;
  }
  #item1{
    background-color: #FF00FF;
  }
  #item2{
    background-color: #FFFF00;
  }
  #item3{
    background-color: #7CFC00;
  }
  #item4{
    background-color: #00FFFF;
  }
  </style>
  <script src='https://code.jquery.com/jquery-latest.js'></script>
  <script>
    $(document).ready(function () {
      var items = $('[id^=item]'), len = items.length, i = 0;
     items.hide();
       (function Reload() {
        items.eq(i).fadeIn().delay(2000).fadeOut(500,Reload);
        i = ++i%len;
    })()
})

  </script>
</head>

<body>
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
</body>

</html>

externuz · #3 (**permalink**) 07.03.2014, 10:49

O_o

Охренеть! Я не понял как, но это работает!

Форум

Справочник

Discord чат

Курсы javascript