Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
Йошь-мыслитель
 Аватар для Xander Bass
126 / 120 / 26
Регистрация: 22.02.2009
Сообщений: 706
Записей в блоге: 5

Слайдер: бешенство скрипта

05.07.2011, 12:16. Показов 1299. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Знаю, название темы звучит по-идиотски Однако, к делу...

Понадобилось написать простенький слайдер. Написал...
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
(function($){
 $.fn.sotdSlider = function(_params)
 {
//  $(this).css('display','none');
  var _params = $(this).extend({
   'mainHeight':412,
   'mainWidth' :980,
   'mainSDelay':3,
   'mainFDelay':500,
   'isSliding' :true,
   'startFrom' :0
  },_params)
// Initialization
  $(this).height(_params.mainHeight);
  $(this).width(_params.mainWidth);
  $(this).append('<div class="sotdSliderMenu"></div>');
  var _menu = $(this).children('div.sotdSliderMenu');
  var _root = $(this);
  var _clid = _params.startFrom;
  var _lcnt = 0;
  
  $(this).css({
   'position':'relative'
  });
 
  $(this).children("div:not('.sotdSliderMenu')").each(function(_i){
   $(this).css({
    'display':'none'
   });
   $(this).addClass('sotdSliderContent');
   $(this).addClass('sotdSliderDiv'+_lcnt);
   var _span = $('<span class="sotdSliderLink">'+$(this).attr('title')+'</span>').data('divnum',_i);
   if ($(this).hasClass('sotdAJAXLoader')) 
   {
    var _href = $(this).children('a:first').attr('href');
    _span.data('ajaxref',_href);
   }
   _span.appendTo(_menu);
   $(this).removeAttr('title');
   _lcnt++;
  });
  
  $(this).children('div.sotdSliderMenu').children('span:eq('+_clid+')').addClass('Current');
  $(this).children('div.sotdSliderContent:eq('+_clid+')').css('display','block');
  var _alink = $(this).children('div.sotdSliderMenu').children('span:eq('+_clid+')');
  var _nlink = $(this).children('div.sotdSliderMenu').children("span:not('.Current'):first");
  var _menu_h = $(this).children('div.sotdSliderMenu').outerHeight();
  var _astyle = {
   'foreground':_alink.css('color'),
   'background':_alink.css('backgroundColor')
  }
  var _nstyle = {
   'foreground':_nlink.css('color'),
   'background':_nlink.css('backgroundColor')
  }
 
  $(this).children("div.sotdSliderContent").each(function(){
   $(this).css('paddingTop',(_menu_h-3)+'px');
   $(this).width(Math.ceil(_root.width()/2));
   $(this).css('paddingLeft',Math.floor(_root.width()/2));
   $(this).height(_root.height()-3);
  });
 
  function _switchTo(_i)
  {
   var _span = _root.children("div.sotdSliderMenu").children("span:eq("+_i+")");
   _root.children("div.sotdSliderContent:visible").each(function(){
    $(this).fadeOut(_params.mainFDelay); 
   });
   _root.children("div.sotdSliderMenu").children("span.Current").each(function(){
    $(this).removeClass('Current');
    $(this).animate({
     top: 0,
     paddingTop: 25
    },200);
   });
   $(this).animate({},_params.mainFDelay);
   _root.children("div.sotdSliderContent:eq("+_i+")").each(function(){
    if ($(this).hasClass('sotdAJAXLoader')) $(this).load(_span.data('ajaxref'));
    $(this).fadeIn(_params.mainFDelay,function(){
     _span.addClass('Current');
     _span.animate({
      top: 5,
      paddingTop: 30     
     },200);
    });
   });
   _clid = _i;
  }
  
  $(this).children('div.sotdSliderMenu').children('span').each(function(){
   $(this).click(function(){
    _switchTo($(this).data('divnum'));
   });
  });
 
  $(this).children('div.sotdSliderMenu').children("span:not('.Current')").each(function(){
   $(this).css({
    top: 0,
    paddingTop: 25
   });
  });
 
  $(this).children('div.sotdSliderMenu').children("span.Current").each(function(){
   $(this).css({
    top: 5,
    paddingTop: 30
   });
  });
 
  $(this).hover(function(){
   clearInterval(_slideThis); _slideThis = false;
  },function(){
   if (_params.isSliding && !_slideThis) _slideThis = setInterval(function(){
    _clid = (_clid==(_lcnt-1))?0:(_clid+1);
    _switchTo(_clid);
   },_params.mainSDelay*1000);
  });
  
  var _slideThis;
  
  if (_params.isSliding) _slideThis = setInterval(function(){
   _clid = (_clid==(_lcnt-1))?0:(_clid+1);
   _switchTo(_clid);
  },_params.mainSDelay*1000);
  $(this).css('display','block');
 }
})(jQuery)
 
$(function(){
 $('.sotdSlider').sotdSlider();
});
Собственно само содержимое создаётся посредством кода:
HTML5
1
2
3
4
5
6
7
8
9
10
11
    <div class="sotdSlider">
      <div title="Заголовок первого слайда">
        Содержимое первого слайда
      </div>
      <div title="Заголовок второго слайда">
        Содержимое второго слайда
      </div>
      <div title="Заголовок третьего слайда">
        Содержимое третьего слайда
      </div>
    </div>
А технический стиль выглядит так:
CSS
1
2
3
4
5
6
.sotdSlider { text-align: left; }
.sotdSliderMenu { text-align: right; border-top: 3px solid white; padding: 22px 24px 15px; }
.sotdSliderLink { position: relative; top: 0px; padding: 25px 24px 6px; margin: 0 3px; cursor: hand; cursor: pointer; }
.sotdSliderMenu .Current { top: 5; padding: 30px 24px 6px; }
.sotdSliderMenu .Over { top: 5; padding: 30px 24px 6px; }
.sotdSliderContent { position: absolute; left: 0; top: 3px; overflow: hidden; }
Всё заработало на ура... ненадолго. В процессе экплуатации скрипта выявился пренеприятнейший баг: стоит только надолго свернуть браузер, переключиться на другую вкладку и тому подобное, при переключении на вкладку со слайдером обнаруживается, что слайдер "бесится". Это выражается в беспорядочном и очень быстром переключении слайдов. Обнаруживалось в Mozilla 4, Opera 10, Safari 5. В IE тестить не рискнул.

Вопрос Знатокам: как вылечить бешенство у этого скрипта?

Важно! Вопрос адресуется Знатокам JavaScript и jQuery, а не любителям предлагать готовые решения вида "скачайте-и-установите-готовый-плагин-jQuery". Объясняю: если бы такой подход был допустим, я бы его применил.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
05.07.2011, 12:16
Ответы с готовыми решениями:

Мониторное бешенство)
Значит так)) Не давно так уж давно я заметил что монитор угасает буквально сикунд на 30, потом изображение сново появляется. Потом через...

COVID-19 он же "коронавирус" , он же КоВи - Китайское Бешенство
Предлагаю отметиться в этой теме тем, кто заболел COVID или был инфицированным носителем. Также напишите регион проживания и где...

Как можно связать работу скрипта из балуна с работой скрипта на странице?
Первый раз задаю вопрос, извините если не в тот раздел. В общем, делаю метку через Яндекс карты и в балунКонтент записываю кнопку с...

2
 Аватар для suharik
261 / 247 / 57
Регистрация: 03.09.2010
Сообщений: 805
05.07.2011, 15:45
У меня было примерно такое, когда скрипт запускается несколько раз. В твоем коде дублированного запуска ненашел. Пересмотри еще раз, может сетинтервал как то запускает его....
Я попробую скрипт себе поставить и прогнать. Мож че найду))
0
Йошь-мыслитель
 Аватар для Xander Bass
126 / 120 / 26
Регистрация: 22.02.2009
Сообщений: 706
Записей в блоге: 5
29.12.2011, 19:14  [ТС]
Для тех, у кого происходит что-либо подобное. Используйте активно метод jQuery stop. Помогает.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
29.12.2011, 19:14
Помогаю со студенческими работами здесь

Выполнение php скрипта по заданию cron и .htaccess каталога скрипта
Гуру, направьте как?: Есть php скрипт, который раз в неделю должен делать рассылку по базе мэйлов. Лежит на хостинге в папке. Если его...

Запрос к БД не выполняется из php-скрипта в зависимости от длительности работы скрипта
Не так давно переехал к другому провайдеру со своим VDS-ом. Все настройки идентичны предыдущему. Но перестал работать php-скрипт,...

Unity - Обращение к публичным полям одного скрипта из другого скрипта
Привет. Скрипты пишу на CSharp. В одном gameObject (назовем его HelloObject) есть два скрипта - Script1 и Script2. У script2 есть...

Как из одного скрипта изменить переменную (int) другого скрипта?
У меня есть два скрипта (money который отвечает за общее количество денег и CarBuy который отвечает за покупку машины). Мне нужно, чтобы...

Запуск скрипта для анализа папки и запуска другого скрипта
Мне нужно написать скрипт, который каждую секунду (или 5 сек) сканировал определенную папку на поиск определенного файла. Например...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Киев стоит - украинская песня
zorxor 28.01.2026
wfWdiRqdTxc О Господи, Вечный, Ты . . . Я помоги, Бесконечный. . . Я прошу Ты. . . Я погибаю, спаси. . . Я прошу Тебя Вечный. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru