Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/12: Рейтинг темы: голосов - 12, средняя оценка - 4.83
SEREJA1995
0 / 0 / 1
Регистрация: 12.06.2013
Сообщений: 98
1

Остановка слайдера при наведении мыши

16.04.2015, 21:28. Просмотров 2300. Ответов 6
Метки нет (Все метки)

Добрый день. Пишу свой слайдер. (цель именно создать. а не взять готовый). Понимаю что использую старые и неюзабельные функции, но все же хочу сделать пока так.

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

Вот HTML разметка
HTML5
1
2
3
4
5
6
7
8
9
10
            <div class="slider" id="t">
                <div class="left" id="left"></div>
                <ul id="slider">
                    <li><img src="img/slider/1.jpg"></li>
                    <li><img src="img/slider/2.jpg"></li>
                    <li><img src="img/slider/3.jpg"></li>
                    <li><img src="img/slider/4.jpg"></li>
                </ul>
                <div class="right" id="right"></div>
            </div>
Вот код java который за это отвечает.

Javascript
1
2
3
4
5
6
7
8
var div = document.getElementById("t");
 
    div.onmouseenter = function (){
        clearInterval(t);
    };
    div.onmouseleave = function (){
        
    };
Кому нужен вот весь скрипт
Кликните здесь для просмотра всего текста

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
var left = document.getElementById("left");
    var right = document.getElementById("right");
    var slider = document.getElementById("slider");
 
 
    left.onclick = function(){ 
        var l = "l";
    slide(l); 
    };
    right.onclick = function(){ 
        var r = "r";
    slide(r); 
    };
/* листает слайды по клику */
function slide(dir){
    if( dir == "r"){
        x = parseInt(slider.style.marginLeft);
        if ( isNaN(x) ){
            x = 0;
        };
        if ( x <= -3600 ){
            x = 0;
        } else {
            x = x - 1200;
        };
        slider.style.marginLeft =  x + "px";
    } else {
        x = parseInt(slider.style.marginLeft);
        if ( isNaN(x) ){
            x = 0;
        };
        if ( x >= 0 ){
            x = -3600;
        } else {
            x = x + 1200;
        };
                slider.style.marginLeft = x + "px";
            };
};
/* листает слайды по времени */
    var t = setInterval('slide("r")', 8000);
 
    var div = document.getElementById("t");
 
    div.onmouseenter = function (){
        clearInterval(t);
    };
    div.onmouseleave = function (){
        
    };
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
16.04.2015, 21:28
Ответы с готовыми решениями:

Остановка слайдера при наведении мыши
Здравствуйте ! Ребят подскажите начинающему в освоении Jawa, как...

Остановка слайдера при нажатии
Здравствуйте! Нужен слайдер, который автоматически листает слайды и при нажатии...

Анимация при наведении мыши
Друзья, доброго времени суток. Как в JS можно сделать вот так (как на...

Изменение переменной при наведении мыши
Всем привет! У меня возник вопрос как сделать так что бы при наведении мыши на...

Изменение шрифта при наведении мыши
&lt;html&gt; &lt;head&gt; &lt;script type='text/javascript'&gt; function styl() { var w =...

6
BANO
Ренегат
Эксперт HTML/CSS
1716 / 1059 / 385
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
16.04.2015, 21:49 2
а у меня вопрос, а как setInterval после остановки ставится? на onmouseleave не заметил
0
SEREJA1995
0 / 0 / 1
Регистрация: 12.06.2013
Сообщений: 98
16.04.2015, 22:03  [ТС] 3
div.onmouseleave = function (){
var t = setInterval('slide("r")', 8000);
};

там такой код на самом деле, я просто пытался всячески менять, и перед тем как выложить забыл добавить
0
BANO
Ренегат
Эксперт HTML/CSS
1716 / 1059 / 385
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
18.04.2015, 12:51 4
SEREJA1995, так должен работать
0
SEREJA1995
0 / 0 / 1
Регистрация: 12.06.2013
Сообщений: 98
18.04.2015, 13:07  [ТС] 5
ну так вот как раз и не работает) точней он останавливает, он если поводить мышью со слайдера и на него раз 10-20, то вместо 5 секундной задержки между слайдами, они начинают каждые 30 сек перелистываться.
0
BANO
Ренегат
Эксперт HTML/CSS
1716 / 1059 / 385
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
18.04.2015, 13:11 6
SEREJA1995, а зачем на него раз 10-20 наводить мышь?
0
SEREJA1995
0 / 0 / 1
Регистрация: 12.06.2013
Сообщений: 98
18.04.2015, 13:55  [ТС] 7
охото чтобы стабильно все работало
0
18.04.2015, 13:55
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
18.04.2015, 13:55

Добавить сообщение при наведении мыши
Как добавить сообщение при наведении мыши? &lt;p onmouseover=&quot;this.????&quot;&gt;&lt;/p&gt; //...

Подсказка при наведении курсора мыши
Смотрю видеоурок, и там переписал вот такой код. Должно при наведении на текст...

Изменение содержимого сайта при наведении мыши
в общем, имеется 2 контейнера, в первом несколько ссылок, и при наведении на...


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

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru