Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.04.2015, 11:37
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

Не работает автопрокрутка слайдера
Добрый день, подскажите, в чем может быть проблема.
Есть скрипт слайдера
$(document).ready(function(){
 function htmSlider(){
  /* Зададим следующие параметры */
  /* обертка слайдера */
  var slideWrap = jQuery('.slide-wrap');
  /* кнопки вперед/назад и старт/пауза */
  var nextLink = jQuery('.next-slide');
  var prevLink = jQuery('.prev-slide');
  var playLink = jQuery('.auto');
  /* Проверка на анимацию */
  var is_animate = true;
  /* ширина слайда с отступами */
  var slideWidth = jQuery('.slide-item-rot').outerWidth();
  /* смещение слайдера */
  var scrollSlider = slideWrap.position().left - slideWidth;
        
  /* Клик по ссылке на следующий слайд */
  nextLink.click(function(){
   if(!slideWrap.is(':animated')) {
    slideWrap.animate({left: scrollSlider}, 500, function(){
     slideWrap
      .find('.slide-item-rot:first')
      .appendTo(slideWrap)
      .parent()
      .css({'left': 0});
    });
   }
  });

  /* Клик по ссылке на предыдующий слайд */
  prevLink.click(function(){
   if(!slideWrap.is(':animated')) {
    slideWrap
     .css({'left': scrollSlider})
     .find('.slide-item-rot:last')
     .prependTo(slideWrap)
     .parent()
     .animate({left: 0}, 500);
   }
  });
        
  /* Функция автоматической прокрутки слайдера */
  function autoplay(){
   if(!is_animate){
    is_animate = true;
    slideWrap.animate({left: scrollSlider}, 500, function(){
     slideWrap
      .find('.slide-item-rot:first')
      .appendTo(slideWrap)
      .parent()
      .css({'left': 0});
     is_animate = false;
    });
   }
  }
        
  /* Клики по ссылкам старт/пауза */
  playLink.click(function(){
   if(playLink.hasClass('play')){
    /* Изменяем клас у кнопки на клас паузы */
    playLink.removeClass('play').addClass('pause');
    /* Добавляем кнопкам вперед/назад клас который их скрывает */
    jQuery('.navy').addClass('disable');
    /* Инициализируем функцию autoplay() через переменную
       чтобы потом можно было ее отключить
    */
    timer = setInterval(autoplay, 1000);
   } else {
    playLink.removeClass('pause').addClass('play');
    /* показываем кнопки вперед/назад */
    jQuery('.navy').removeClass('disable');
    /* Отключаем функцию autoplay() */
    clearInterval(timer);
   }
  });

 }


Все отлично работает, кроме автопрокрутки. может быть, кто-то своим профессиональным взглядом сможет посмотреть, что не так?
Спасибо!

P.S. Возможно, с темой промахнулся. Прошу модератора исправить мою оплошность

Последний раз редактировалось Alexbelkevich, 05.04.2015 в 11:46.
Ответить с цитированием
  #2 (permalink)  
Старый 05.04.2015, 11:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Alexbelkevich,
где строка 78 и сделайте макет
Ответить с цитированием
  #3 (permalink)  
Старый 05.04.2015, 12:29
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

Не до конца скопировал. Вот окончание
/* иницилизируем функцию слайдера */
 htmSlider();
});


<div class="slider-rot">
              <div class="slide-list">
                <div class="slide-wrap">
                  <div class="slide-item-rot">
                    <img src="images/image3.png" alt="" />
                    <span class="slide-title">Ритуальные ткани</span>
                  </div>
                  <div class="slide-item-rot">
                    <img src="images/image2.png" alt="" />
                    <span class="slide-title">Пледовые ткани</span>
                  </div>
                  <div class="slide-item-rot">
                    <img src="images/image1.png" alt="" />
                    <span class="slide-title">Пледы</span>
                  </div>
                  <div class="slide-item-rot">
                    <img src="images/image3.png" alt="" />
                    <span class="slide-title">Ритуальные ткани</span>
                  </div>
                  <div class="slide-item-rot">
                    <img src="images/image2.png" alt="" />
                    <span class="slide-title">Пледовые ткани</span>
                  </div>
                  <div class="slide-item-rot">
                    <img src="images/image1.png" alt="" />
                    <span class="slide-title">Пледы</span>
                  </div>
                    
                </div>
                <div class="clear"></div>
              </div>
              <div name="prev" class="navy prev-slide"></div>
              <div name="next" class="navy next-slide"></div>
              <div class="auto play"></div>
        </div>


Это HTML вызов
Ответить с цитированием
  #4 (permalink)  
Старый 05.04.2015, 12:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Alexbelkevich,
снимите запрет на анимацию строка 11 false
Ответить с цитированием
  #5 (permalink)  
Старый 05.04.2015, 12:50
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

Безрезультатно(
Ответить с цитированием
  #6 (permalink)  
Старый 05.04.2015, 13:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Alexbelkevich,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slide-item-rot  {
     float: left;

  }
  .orange {
    background: #FFCC00;
  }
  .orange + div{
    display: block;
  }
  span {
     cursor: pointer;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
 function htmSlider(){
  /* Зададим следующие параметры */
  /* обертка слайдера */
  var slideWrap = jQuery('.slide-wrap');
  /* кнопки вперед/назад и старт/пауза */
  var nextLink = jQuery('.next-slide');
  var prevLink = jQuery('.prev-slide');
  var playLink = jQuery('.auto');
  /* Проверка на анимацию */
  var is_animate = false;
  /* ширина слайда с отступами */
  var slideWidth = jQuery('.slide-item-rot').outerWidth();
  /* смещение слайдера */
  var scrollSlider = slideWrap.position().left - slideWidth;

  /* Клик по ссылке на следующий слайд */
  nextLink.click(function(){
   if(!slideWrap.is(':animated')) {
    slideWrap.animate({left: scrollSlider}, 500, function(){
     slideWrap
      .find('.slide-item-rot:first')
      .appendTo(slideWrap)
      .parent()
      .css({'left': 0});
    });
   }
  });

  /* Клик по ссылке на предыдующий слайд */
  prevLink.click(function(){
   if(!slideWrap.is(':animated')) {
    slideWrap
     .css({'left': scrollSlider})
     .find('.slide-item-rot:last')
     .prependTo(slideWrap)
     .parent()
     .animate({left: 0}, 500);
   }
  });

  /* Функция автоматической прокрутки слайдера */
  function autoplay(){
   if(!is_animate){
    is_animate = true;
    slideWrap.animate({left: scrollSlider}, 500, function(){
     slideWrap
      .find('.slide-item-rot:first')
      .appendTo(slideWrap)
      .parent()
      .css({'left': 0});
     is_animate = false;
    });
   }
  }

  /* Клики по ссылкам старт/пауза */
  playLink.click(function(){
   if(playLink.hasClass('play')){
    /* Изменяем клас у кнопки на клас паузы */
    playLink.removeClass('play').addClass('pause');
    /* Добавляем кнопкам вперед/назад клас который их скрывает */
    jQuery('.navy').addClass('disable');
    /* Инициализируем функцию autoplay() через переменную
       чтобы потом можно было ее отключить
    */
    timer = setInterval(autoplay, 1000);
   } else {
    playLink.removeClass('pause').addClass('play');
    /* показываем кнопки вперед/назад */
    jQuery('.navy').removeClass('disable');
    /* Отключаем функцию autoplay() */
    clearInterval(timer);
   }
  });
  playLink.click()  //для теста
 }

 htmSlider()

})
  </script>
</head>

<body>  <div class="slider-rot">
              <div class="slide-list">
                <div class="slide-wrap">
                  <div class="slide-item-rot">
                    <img src="images/image3.png" alt="" />
                    <span class="slide-title">Ритуальные ткани</span>
                  </div>
                  <div class="slide-item-rot">
                    <img src="images/image2.png" alt="" />
                    <span class="slide-title">Пледовые ткани</span>
                  </div>
                  <div class="slide-item-rot">
                    <img src="images/image1.png" alt="" />
                    <span class="slide-title">Пледы</span>
                  </div>
                  <div class="slide-item-rot">
                    <img src="images/image3.png" alt="" />
                    <span class="slide-title">Ритуальные ткани</span>
                  </div>
                  <div class="slide-item-rot">
                    <img src="images/image2.png" alt="" />
                    <span class="slide-title">Пледовые ткани</span>
                  </div>
                  <div class="slide-item-rot">
                    <img src="images/image1.png" alt="" />
                    <span class="slide-title">Пледы</span>
                  </div>

                </div>
                <div class="clear"></div>
              </div>
              <div name="prev" class="navy prev-slide">prev</div>
              <div name="next" class="navy next-slide">next</div>
              <div class="auto play">auto play</div>
        </div>



</body>

</html>
Ответить с цитированием
  #7 (permalink)  
Старый 05.04.2015, 14:21
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

Мистика какая-то...
не работает все равно. Буду ковыряться у себя... спасибо!
Ответить с цитированием
  #8 (permalink)  
Старый 05.04.2015, 14:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Alexbelkevich,
пост 6 работает?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
innerHTML для TR в InternetExplorer не работает? Непонятливый Элементы интерфейса 3 15.10.2012 17:14
JS: работает на сервере, не работает из папки -majestic- Общие вопросы Javascript 2 02.08.2012 14:41
Не работает push! Динамическая вставка TSEH25 ExtJS 5 03.07.2012 13:00
jQyery функция странно работает! Midel Общие вопросы Javascript 4 08.04.2012 13:40
помогите найти ошибку (работает в IE но не работает в Firefox) Len4ik Javascript под браузер 2 11.05.2010 15:41