Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.10.2014, 03:05
Кандидат Javascript-наук
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 27.11.2010
Сообщений: 145

добавить кнопку next&last
есть код

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, 10:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,334

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>
Ответить с цитированием
  #3 (permalink)  
Старый 24.10.2014, 21:03
Кандидат Javascript-наук
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 27.11.2010
Сообщений: 145

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как по клику на кнопку получить отмеченный объект pirat9629 ExtJS 0 19.08.2014 10:49
Как убрать кнопку и добавить надпись "Идет загрузка" Jnas Events/DOM/Window 9 29.08.2011 11:55
как добавить кнопку к [js] KOLANICH Сайт Javascript.ru 2 10.04.2010 19:34
Добавить кнопку после каждой ссылки… exec jQuery 0 21.01.2010 17:18
Скрипт калькулятора (не могу добавить еще одно значение) Jee_Day Я не знаю javascript 2 22.05.2009 12:19