Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.02.2013, 15:50
Новичок на форуме
Отправить личное сообщение для aquapasha Посмотреть профиль Найти все сообщения от aquapasha
 
Регистрация: 06.02.2013
Сообщений: 7

Авто смена слайдера
Как сделать, чтобы каждые пять секунд чередовались эти 4 функции?
$('#slideshow-nav-1').addClass('active').click(function(){
    $('#slideshow-image1').animate({'left':'-1600px'},500,function(){
      $(this).attr('src','../images/slide1.png').css('left','1600px').animate({'left':'100px'},'500');
    });
    $('#slideshow-nav-1').addClass('active'); $('#slideshow-nav-2').removeClass('active');
    $('#slideshow-nav-3').removeClass('active'); $('#slideshow-nav-4').removeClass('active');
  });
  $('#slideshow-nav-2').click(function(){
    $('#slideshow-image1').animate({'left':'-1600px'},500,function(){
      $(this).attr('src','../images/slide2.png').css('left','1600px').animate({'left':'100px'},'500');
    });
    $('#slideshow-nav-1').removeClass('active'); $('#slideshow-nav-2').addClass('active');
    $('#slideshow-nav-3').removeClass('active'); $('#slideshow-nav-4').removeClass('active');
  });
  $('#slideshow-nav-3').click(function(){
    $('#slideshow-image1').animate({'left':'-1600px'},500,function(){
      $(this).attr('src','../images/slide3.png').css('left','1600px').animate({'left':'100px'},'500');
    });
    $('#slideshow-nav-1').removeClass('active'); $('#slideshow-nav-2').removeClass('active');
    $('#slideshow-nav-3').addClass('active'); $('#slideshow-nav-4').removeClass('active');
  });
  $('#slideshow-nav-4').click(function(){
    $('#slideshow-image1').animate({'left':'-1600px'},500,function(){
      $(this).attr('src','../images/slide4.png').css('left','1600px').animate({'left':'100px'},'500');
    });
    $('#slideshow-nav-1').removeClass('active'); $('#slideshow-nav-2').removeClass('active');
    $('#slideshow-nav-3').removeClass('active'); $('#slideshow-nav-4').addClass('active');
  });
Ответить с цитированием
  #2 (permalink)  
Старый 06.02.2013, 16:56
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Добавьте функциям имена и вызывайте их одну за другой с помощью setTimeout(funcName, 5000).

Последняя должна вызывать первую.

Последний раз редактировалось tsigel, 06.02.2013 в 17:00.
Ответить с цитированием
  #3 (permalink)  
Старый 06.02.2013, 18:45
Новичок на форуме
Отправить личное сообщение для aquapasha Посмотреть профиль Найти все сообщения от aquapasha
 
Регистрация: 06.02.2013
Сообщений: 7

Можно пример рабочего кода, пожалуйста.
Ответить с цитированием
  #4 (permalink)  
Старый 06.02.2013, 18:51
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от aquapasha Посмотреть сообщение
$('#slideshow-nav-1').addClass('active').click(function(){
    $('#slideshow-image1').animate({'left':'-1600px'},500,function(){
      $(this).attr('src','../images/slide1.png').css('left','1600px').animate({'left':'100px'},'500');
    });
    $('#slideshow-nav-1').addClass('active'); $('#slideshow-nav-2').removeClass('active');
    $('#slideshow-nav-3').removeClass('active'); $('#slideshow-nav-4').removeClass('active');
  });
  $('#slideshow-nav-2').click(function(){
    $('#slideshow-image1').animate({'left':'-1600px'},500,function(){
      $(this).attr('src','../images/slide2.png').css('left','1600px').animate({'left':'100px'},'500');
    });
    $('#slideshow-nav-1').removeClass('active'); $('#slideshow-nav-2').addClass('active');
    $('#slideshow-nav-3').removeClass('active'); $('#slideshow-nav-4').removeClass('active');
  });
  $('#slideshow-nav-3').click(function(){
    $('#slideshow-image1').animate({'left':'-1600px'},500,function(){
      $(this).attr('src','../images/slide3.png').css('left','1600px').animate({'left':'100px'},'500');
    });
    $('#slideshow-nav-1').removeClass('active'); $('#slideshow-nav-2').removeClass('active');
    $('#slideshow-nav-3').addClass('active'); $('#slideshow-nav-4').removeClass('active');
  });
  $('#slideshow-nav-4').click(function(){
    $('#slideshow-image1').animate({'left':'-1600px'},500,function(){
      $(this).attr('src','../images/slide4.png').css('left','1600px').animate({'left':'100px'},'500');
    });
    $('#slideshow-nav-1').removeClass('active'); $('#slideshow-nav-2').removeClass('active');
    $('#slideshow-nav-3').removeClass('active'); $('#slideshow-nav-4').addClass('active');
  });
вот она, мощь жуквери
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #5 (permalink)  
Старый 06.02.2013, 18:55
Новичок на форуме
Отправить личное сообщение для aquapasha Посмотреть профиль Найти все сообщения от aquapasha
 
Регистрация: 06.02.2013
Сообщений: 7

Я в нем вообще не силен, буду благодарен, если вы покажите как надо делать, чтобы понять ошибки свои.
Ответить с цитированием
  #6 (permalink)  
Старый 06.02.2013, 19:28
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Сообщение от nerv_
вот она, мощь жуквери
Да там чушь имхо - события вешать последовательно на каждый сходный id
c идентичными деяними,
Даж напрягацо не хотца на такой код
Ответить с цитированием
  #7 (permalink)  
Старый 06.02.2013, 19:29
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Сообщение от aquapasha
, буду благодарен, если вы покажите как
Дайте ссылку на страницу с рабочим(полурабочим) Демо
Ответить с цитированием
  #8 (permalink)  
Старый 06.02.2013, 19:39
Новичок на форуме
Отправить личное сообщение для aquapasha Посмотреть профиль Найти все сообщения от aquapasha
 
Регистрация: 06.02.2013
Сообщений: 7

вот
Ответить с цитированием
  #9 (permalink)  
Старый 06.02.2013, 19:47
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

aquapasha,
Есть готовое, ток высоту и оформление кружков подправить
=> Слайд шоу на библиотеке jQuery
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Два слайдера на странице с одинаковыми классами работают одновременно. SlafkoCe jQuery 4 14.12.2012 10:44
Помогите доработать навигацию jquery слайдера dima-f1 jQuery 0 29.02.2012 17:36
Помощь в настройке слайдера tatiana-js Работа 1 06.01.2012 15:53
Плавная смена картинок - как? petyaeva Элементы интерфейса 0 21.07.2010 15:16