Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Слайдер CSS + jQuery глюк (https://javascript.ru/forum/css-html/29433-slajjder-css-jquery-glyuk.html)

Acreator57887 27.06.2012 19:04

Слайдер CSS + jQuery глюк
 
Всем привет)
Помогите решить проблемку со слайдером?
Слайдер мой, как видно из названия на CSS и jQuery создавал на основе урока http://ruseller.com/lessons.php?rub=29&id=534
Но у меня не пункты-ссылки а две стрелки по бокам.
Вот сам скрипт:
http://jfdu.ucoz.ru/slider.js

Проблема у меня с ним в файрфоксе, хроме:
Перешёл на сайт с слайдером, не выключил его, пошёл гулять по другим вкладкам, пришёл через несколько минут, а он начал ускоренно перелистывать слайды (там стоит таймер на каждые 6 секунд, а он перелистывает без пауз) спустя какое-то время слайдер возвращается в нормальный режим. Такое чувство, что он листал столько, сколько он пролистал бы пока я гулял по др. вкладкам.
И ещё, возможно это от одной яблони, он запоминает кол-во нажатий и листает столько, сколько раз я нажал на стрелку.

Помогите плиз:cray:

P.S. На гугле забанят если я опять буду доставать его своими поисковыми запросами:lol:

Deff 27.06.2012 19:35

Acreator57887,
Думаю корень тут
rotateSwitch = function(){
    play = setInterval(function(){ //Задать таймер
        $active = $('.paging a.active').next(); 
        if ( $active.length === 0) {
            $active = $('.paging a:first'); //после последней - обратно на первую
        }
        rotate(); 
    }, 7000); //Время для прокрутки (7 секунд)
};

rotateSwitch();

Функцию стоит переделать через setTimeout и вызов самой себя, в первой строке функции clearTimeout(timeoutId)
всех предыдущих вызовов http://javascript.ru/setTimeout

Acreator57887 27.06.2012 20:01

А подробнее можно?
Я так понял setTimeout выполняет функцию через заданное время один раз. А как же сделать выполнение "по кругу"?
"вызов самой себя" это как? Возможно, я ошибаюсь, но мне кажется это всего лишь удвоит время..
хотя по идее должно сработать, всё равно можно подробнее, а то я с синтаксисом не дружу
Может попробовать пропустить её через цикл? Или будут ошибки?

Acreator57887 27.06.2012 20:44

Спасибо за новый способ ;)
Но не помогло. Глюк остался.

Deff 27.06.2012 22:57

Acreator57887, Пробуйте добавить
var timeout2;
function rotateS() {
*!*
    clearInterval(play);
*/!*
    clearTimeout(timeout2);
    timeout2 = setTimeout(function() {rotateSwitch ();rotateS() }, 6000);
}

rotateSwitch = function(){
rotate_r(); 
rotateS();
};

Acreator57887 27.06.2012 23:40

С этой строчкой вообще не листает.

Deff 28.06.2012 11:48

Цитата:

Сообщение от Acreator57887
С этой строчкой вообще не листает.

Ясен перец, тады данный setInterval; нун тоже переделать через setTimeout и делать подобно
предыдущей замене, внутри цикла перезапуска того setTimeout и сбрасывать clearTimeout(play);

Acreator57887 28.06.2012 13:39

Блин ничего не понял.:blink: Второй чтоль делать? Почему "тоже"? он же один вроде таймер-то.
"Ясен перец, тады данный setInterval; нун тоже переделать через setTimeout" А первый раз мы не его переделывали??

Deff 28.06.2012 13:45

Acreator57887,
У Вас их похоже два - первый проверяет на отсутствие кликов перезапускает анимацию при остутствии кликов в течении какого то времени,
Второй запускает анимацию периодически через 6 сек

Acreator57887 28.06.2012 13:53

Блин как всё странно... в опере норм работает. Да нет там второго таймера или я ошибаюсь? Ссылку на сам сайт с слайдером в ЛС кинул.

Deff 28.06.2012 14:00

Acreator57887,
Нет, действительно - посмотрел - изучаю

Deff 28.06.2012 14:07

Acreator57887,
Так - не спасает ?
$(window).load(function(){
$(".button").show();

var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
var control_x = (imageSum-1)*(0-900);
var x = 0;


$(".image_reel").css({'width' : imageReelWidth});

rotate_l = function(){
if (x<0) { 
$(".image_reel").animate({
        left: x+900
    }, 500 ); 
x = x + 900;
}
else { 
$(".image_reel").animate({
        left: control_x
    }, 1000 );
x = control_x;
}
}; 

rotate_r = function(){
if (x>control_x) {
$(".image_reel").animate({
        left: x-900
    }, 500 );
x = x - 900;
}
else {
$(".image_reel").animate({
        left: 0
    }, 1000 );
x = 0;
}
};
var play;
rotateSwitch = function(){
    play = setInterval(function(){ 
         rotate_r(); 
    }, 6000); 
};
rotateSwitch();

$(".button a").hover(function() {      
    clearInterval(play); 
}, function() {
    rotateSwitch(); 
});		

$("#arrow_l").click(function() {
clearInterval(play); 
rotate_l(); 
return false;
});

$("#arrow_r").click(function() {
clearInterval(play);
rotate_r();
return false;
});
});

Поправил

Acreator57887 28.06.2012 14:56

var play; ? а смысл? сейчас уже проверяю.
Ну да, проверил, никакой разницы. Тут наверное что-то другое..
Может эти браузеры (хром, файрфокс) просто не выполняют скрипт, когда пользователь перешёл на другую вкладку, за это время действия "накапливаются" а по возвращению пользователя - начинается ускоренное выполнение.

Может есть способ заставить браузер выполнять функцию "всегда" или наоборот сбрасывать таймер, когда окно не активно?

Есть идея: может есть способ узнать сколько действий невыполненых накопилось? тогда можно было-бы поставить условие - если действий накопилось больше 1 или 2 то время анимации сделать 0 (добавить переменную ну например TimeAnimation) ...только вряд ли возможно узнать сколько действий накопилось.

Заметил вот что: пока меня нет, действия действительно "накапливаются" - листание продолжилось с слайда, следующего за тем, что был когда я уходил т.е. браузер не выполняет скрипт когда меня нету.

Нужно как-то заставить выполнять скрипт даже когда меня нет, или сбрасывать таймер, когда пользователь переходит на др. вкладку...

Acreator57887 28.06.2012 16:54

Решил проблему!!! Ура!!!!!!!!!!:dance: :dance:
Хотел задать вопрос на другом ресурсе и натолкнулся на подобный случай. Сейчас дам ссылку но прежде скажу, прочтите внимательно комментарии к ответу, там поправочка от автора вопроса, иначе не заработает.
http://www.askdev.ru/jquery/7567/%D0...%D0%B0-jquery/

Спасибо Deff за желание помочь!:dance:


Часовой пояс GMT +3, время: 18:36.