Форум

ufaclub · #1 (**permalink**) 24.10.2014, 04:05

есть код

function next(arr) {
      var max = arr.length - 1,
        i = -1;
      return function () {
        i = i < max ? i + 1 : 0;
        return arr[i];
      };
    }
    jQuery(function () {
      var slider = next($('#start>div.go'));
      var curent;
      setInterval(function () {
        if (curent) $(curent).hide();
        curent = slider();
        $(curent).show();
      }, 3000);
    });

по очереди меняет видимость 3х div.go по циклу 3000ms

мне бы хотелось бы сделать два дива .last & .next
по клику на который бы происходило действие отображающее предыдущий div.go считаю от того div.go который сейчас виден.

Ну если проще то кнопка назад и вперед. и Все.

Помогите дописать код пожалуйста!

рони · #2 (**permalink**) 24.10.2014, 11:32

ufaclub,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .go  {
   display: none;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font:  5em bold;
    color: #FFFFFF;
  }


  .go:nth-child(2) {
     background: #FFCC00;
      display: block;
  }
  .go:nth-child(3) {
     background: #009900;
  }
  .go:nth-child(4) {
     background: #0066FF;
  }
  .prev, .next{
    cursor: pointer;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 jQuery(function() {
     var slider = next($('#start>div.go'));
     var curent = $('#start>div.go:first');

     function next(arr) {
         var max = arr.length - 1,
             i = 0;
         return function(direction) {
             direction ? i-- : i++;
             i > max && (i = 0);
             i < 0 && (i = max);
             return arr[i];
         };
     }

     function show(direction) {
         $(curent).hide();
         curent = slider(direction);
         $(curent).show();
     }

    // setInterval(show, 3000);

     var s = $(".prev, .next");
     s.click(function() {
         show($(this).is('.prev'))
     });
 });
  </script>
</head>

<body>


<div id='start'>
<div class='prev'>prev</div>
<div class='go'>1</div>
<div class='go'>2</div>
<div class='go'>3</div>
<div class='next'>next</div>
</div>

</body>

</html>

ufaclub · #3 (**permalink**) 24.10.2014, 22:03

спасибо, второй год уже в основном только ты и помогаешь

Форум

Справочник

Discord чат

Курсы javascript