Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.92/13: Рейтинг темы: голосов - 13, средняя оценка - 4.92
929 / 460 / 91
Регистрация: 20.02.2016
Сообщений: 2,545
1

Автоматическая смена слайда

18.06.2017, 19:08. Показов 2714. Ответов 3
Метки нет (Все метки)

Доброго всем времени суток) Есть код слайдера:
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
jQuery(document).ready(function(){
    function htmSlider() {
        var slideWrap = jQuery('.slide-wrap');
        var nextLink = jQuery('.next-slide');
        var prevLink = jQuery('.prev-slide');
        var is_animate = false;
        var slideWidth = jQuery('.slide-item').outerWidth();
        // Задали значение всех переменных
        
        var scrollSlider = slideWrap.position().left - slideWidth; // Действие при клике по кнопке сменить слайд
        
        // Клик по кнопке следующий слайд
       
            nextLink.click(function (){
            if(!slideWrap.is(':animated')) {
                slideWrap.animate({left: scrollSlider}, 500, function(){
                    slideWrap
                    .find('.slide-item:first')
                    .appendTo(slideWrap)
                    .parent()
                    .css({'left': 0});
                });
            }
        });
        
        // Клик по кнопке предыдущий слайд
        prevLink.click(function(){
            if(!slideWrap.is(':animated')) {
                slideWrap
                .css({'left': scrollSlider })
                    .find('.slide-item:last')
                    .prependTo(slideWrap)
                    .parent()
                    .animate({left: 0}, 500);
            }
            });
    }
    htmSlider();
 
});
Как сделать так что бы слайд сменялся на следующий через определенные промежутки времен???
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.06.2017, 19:08
Ответы с готовыми решениями:

Смена background при смене слайда !
Всем привет. Сразу к делу. На сайте реализован большой слайдер, на всю ширину экрана. Нужно, что-бы...

Автоматическая смена фото
;(function($,undefined){ var _timer=, _fw=window._fw=$.fn._fw=function(_){ var i,name=...

Автоматическая смена селекта
Как сделать чтоб при загрузки страницы автоматически выбирался ,,select value='1' ,, и даже если...

Автоматическая смена фона на сайте
Приветствую всех. Можете подсказать хорошую библиотеку или скрипт для этого? Мне нужно менять фон...

3
511 / 485 / 161
Регистрация: 08.07.2013
Сообщений: 1,714
Записей в блоге: 1
20.06.2017, 11:59 2
после вызова функции htmlSlider() на следующей строке дописать
Javascript
1
2
3
setInterval(function(){
  jQuery('.next-slide').trigger('click')
}, 1000)
1000 - это интервал в 1 секунду, с которым меняются слайды
1
929 / 460 / 91
Регистрация: 20.02.2016
Сообщений: 2,545
25.06.2017, 20:49  [ТС] 3
Спасибо всё прекрасно работает
Но вот её вопрос, как обнулить счётчик??? Сейчас функция вызывается каждые 10 секунд, но если кликнуть по кнопке скажем на 8 секунде, то уже через 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
jQuery(document).ready(function(){
    function htmSlider() {
        var slideWrap = jQuery('.slide-wrap');
        var nextLink = jQuery('.next-slide');
        var prevLink = jQuery('.prev-slide');
        var is_animate = false;
        var slideWidth = jQuery('.slide-item').outerWidth();
        // Задали значение всех переменных
        
        var scrollSlider = slideWrap.position().left - slideWidth; // Действие при клике по кнопке сменить слайд
        
        // Клик по кнопке следующий слайд
       
            nextLink.click(function next(){
            if(!slideWrap.is(':animated')) {
                slideWrap.animate({left: scrollSlider}, 500, function(){
                    slideWrap
                    .find('.slide-item:first')
                    .appendTo(slideWrap)
                    .parent()
                    .css({'left': 0});
                    clearInterval(timer);
                    var timer;
                });
            }
        });
        // Клик по кнопке предыдущий слайд
        prevLink.click(function(){
            if(!slideWrap.is(':animated')) {
                slideWrap
                .css({'left': scrollSlider })
                    .find('.slide-item:last')
                    .prependTo(slideWrap)
                    .parent()
                    .animate({left: 0}, 500);
            }
            });
    }
    htmSlider();
   var timer = setInterval(function(){
  jQuery('.next-slide').trigger('click')
}, 10000);
 
});
Но не помогло, счётчик всё равно не сбрасывается...
Подскажите плиз как это сделать???
0
929 / 460 / 91
Регистрация: 20.02.2016
Сообщений: 2,545
03.07.2017, 22:12  [ТС] 4
Сделал всё сам от так:
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
jQuery(document).ready(function(){
    function htmSlider() {
        var slideWrap = jQuery('.slide-wrap');
        var nextLink = jQuery('.next-slide');
        var prevLink = jQuery('.prev-slide');
        var is_animate = false;
        var slideWidth = jQuery('.slide-item').outerWidth();
        // Задали значение всех переменных
        
        var scrollSlider = slideWrap.position().left - slideWidth; // Действие при клике по кнопке сменить слайд
        
        // Клик по кнопке следующий слайд
       
            nextLink.click(function next(){
            if(!slideWrap.is(':animated')) {
                slideWrap.animate({left: scrollSlider}, 500, function(){
                    slideWrap
                    .find('.slide-item:first')
                    .appendTo(slideWrap)
                    .parent()
                    .css({'left': 0});
                    clearInterval(timer);
                    var timer;
                });
            }
        });
        // Клик по кнопке предыдущий слайд
        prevLink.click(function(){
            if(!slideWrap.is(':animated')) {
                slideWrap
                .css({'left': scrollSlider })
                    .find('.slide-item:last')
                    .prependTo(slideWrap)
                    .parent()
                    .animate({left: 0}, 500);
            }
            });
        nextLink.click(function killOne(){
        clearInterval(timer);
        timer = setInterval(function(){
  jQuery('.next-slide').trigger('click')
}, 10000);
    })
          prevLink.click(function killTwo(){
        clearInterval(timer);
        timer = setInterval(function(){
  jQuery('.next-slide').trigger('click')
}, 10000);
    })
    }
    htmSlider();
   var timer = setInterval(function(){
  jQuery('.next-slide').trigger('click')
}, 10000);
    
    
});
Осталось всё только упростить до одной функции Kill вместо двух и всё будет ok. Может быть кто подскажет как это сделать???

Добавлено через 11 минут
Всё упростил сам:
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
jQuery(document).ready(function(){
    function htmSlider() {
        var slideWrap = jQuery('.slide-wrap');
        var nextLink = jQuery('.next-slide');
        var prevLink = jQuery('.prev-slide');
        var is_animate = false;
        var slideWidth = jQuery('.slide-item').outerWidth();
        // Задали значение всех переменных
        
        var scrollSlider = slideWrap.position().left - slideWidth; // Действие при клике по кнопке сменить слайд
        
        // Клик по кнопке следующий слайд
       
            nextLink.click(function next(){
            if(!slideWrap.is(':animated')) {
                slideWrap.animate({left: scrollSlider}, 500, function(){
                    slideWrap
                    .find('.slide-item:first')
                    .appendTo(slideWrap)
                    .parent()
                    .css({'left': 0});
                    clearInterval(timer);
                    var timer;
                });
            }
        });
        // Клик по кнопке предыдущий слайд
        prevLink.click(function(){
            if(!slideWrap.is(':animated')) {
                slideWrap
                .css({'left': scrollSlider })
                    .find('.slide-item:last')
                    .prependTo(slideWrap)
                    .parent()
                    .animate({left: 0}, 500);
            }
            });
        function killOne(){
        clearInterval(timer);
        timer = setInterval(function(){
  jQuery('.next-slide').trigger('click')
}, 10000);
    }
        nextLink.click(killOne);
        
          prevLink.click(killOne);
 
    }
    htmSlider();
   var timer = setInterval(function(){
  jQuery('.next-slide').trigger('click')
}, 10000);
    
    
});
Сори туплю
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
03.07.2017, 22:12

Автоматическая смена содержимого iframe
Возможно ли сделать следующее:есть блок в котором выводится видео добавленное через iframe. Можно...

Автоматическая смена картинок
Суть проблемы вот в чем: Написал скрипт(javascript) меняющий одну картинку на странице через...

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

Автоматическая рандомная смена цветов элемента
вот js код, меняющий линии на данный цвет.var divs = document.getElementsByTagName('line');...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru