Автоматическая прокрутка слайдера

@barbaris08 · Регистрация: 09.05.2013

Студворк — интернет-сервис помощи студентам

Добрый день!
Есть слайдер с кнопочками, при нажатии на кнопочку он двигается в соответствующую сторону. Я бы хотел, чтобы слайдер прокручивался влево автоматически, а кнопки были скрыты. Но при наведении мышки слайдер должен останавливаться, а кнопки становиться видимыми и реагировать на нажатия. Как сделать не знаю, ибо с джава знаком очень плохо))

Вот скрипт работы кнопочек:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
 
    $(".b-carousel-button-right").click(function(){ // при клике на правую кнопку запускаем следующую функцию:
        $(".h-carousel-items").animate({left: "-200px"}, 200); // производим анимацию: блок с набором картинок уедет влево на 222 пикселя (это ширина одного прокручиваемого элемента) за 200 милисекунд.
        setTimeout(function () { // устанавливаем задержку времени перед выполнением следующих функций. Задержка нужна, т.к. эти ффункции должны запуститься только после завершения анимации.
            $(".h-carousel-items .b-carousel-block").eq(0).clone().appendTo(".h-carousel-items"); // выбираем первый элемент, создаём его копию и помещаем в конец карусели
            $(".h-carousel-items .b-carousel-block").eq(0).remove(); // удаляем первый элемент карусели     
            $(".h-carousel-items").css({"left":"0px"}); // возвращаем исходное смещение набора набора элементов карусели
        }, 300);
    });
    
    $(".b-carousel-button-left").click(function(){ // при клике на левую кнопку выполняем следующую функцию:      
        $(".h-carousel-items .b-carousel-block").eq(-1).clone().prependTo(".h-carousel-items"); // выбираем последний элемент набора, создаём его копию и помещаем в начало набора   
        $(".h-carousel-items").css({"left":"-200px"}); // устанавливаем смещение набора -222px       
        $(".h-carousel-items").animate({left: "0px"}, 200); // за 200 милисекунд набор элементов плавно переместится в исходную нулевую точку
        $(".h-carousel-items .b-carousel-block").eq(-1).remove(); // выбираем последний элемент карусели и удаляем его
    });
});

Заранее спасибо за помощь!

@barbaris08 · 08.05.2014, 09:06 **[ТС]**

Up! Мужики, требуется помощь, все еще актуально.

@Faust971 · 09.05.2014, 14:59

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var timea;
 
 $(".b-carousel-button-left, .b-carousel-button-right").css("display","none");
 
function autoleft(){
 $(".b-carousel-button-left").click();
timea=setTimeout(autoleft, 3000);
}
 
timea=setTimeout(autoleft, 3000);
 
$('.h-carousel-items').on('mouseenter', function(){
clearTimeout(timea);
 $(".b-carousel-button-left, .b-carousel-button-right").css("display","block");
});
 
$('.h-carousel-items').on('mouseleave', function(){
timea=setTimeout(autoleft, 3000);
 $(".b-carousel-button-left, .b-carousel-button-right").css("display","none");
});

@barbaris08 · 11.05.2014, 00:53 **[ТС]**

Faust971, спасибо большое, автопрокрутка работает, но при наведении курсора на слайдер она не останавливается) как сделать, чтобы остановилась?

@Faust971 · 11.05.2014, 13:05

html структуру слайдера полностью приведи, разберемся, я походу неправильно класс контейнера указал.

@barbaris08 · 11.05.2014, 18:11 **[ТС]**

HTML5
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
<div class="b-carousel"> <!-- контейнер, в котором будет карусель -->
    
        <div class="b-carousel-button-left"></div> <!-- левая кнопка -->
        <div class="b-carousel-button-right"></div> <!-- правая кнопка -->
        
        <div class="h-carousel-wrapper"> <!-- видимая область карусели -->
            <div class="h-carousel-items"> <!-- весь набор элементов карусели -->
            
                <div class="b-carousel-block"> <!-- первый элемент карусели -->
                    <a href="#" class="a-carousel-image-link">
                        <img src="images/1.png" alt="" width="200" height="75" />
                    </a>
                </div>
 
                                <div class="b-carousel-block"> <!-- второй элемент карусели -->
                    <a href="#" class="a-carousel-image-link">
                        <img src="images/2.png" alt="" width="200" height="75" />
                    </a>
                </div>
 
                
            </div>
        </div>
        
    </div>

@Faust971 · 11.05.2014, 18:16

Так попробуй

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var timea;
 
 $(".b-carousel-button-left, .b-carousel-button-right").css("display","none");
 
function autoleft(){
 $(".b-carousel-button-left").click();
timea=setTimeout(autoleft, 3000);
}
 
timea=setTimeout(autoleft, 3000);
 
$('.b-carousel').on('mouseenter', function(){
clearTimeout(timea);
 $(".b-carousel-button-left, .b-carousel-button-right").css("display","block");
});
 
$('.b-carousel').on('mouseleave', function(){
timea=setTimeout(autoleft, 3000);
 $(".b-carousel-button-left, .b-carousel-button-right").css("display","none");
});

@barbaris08 · 11.05.2014, 21:20 **[ТС]**

Faust971, не работает)

@Faust971 · 11.05.2014, 22:29

Вы код надеюсь внутри к своему добавили. А то многие ниже ready вставляют.

JavaScript
1
$(document).ready(function(){  //здесь весь код});

Потому что у меня проверил работает.

@barbaris08 · 12.05.2014, 08:25 **[ТС]**

Faust971, ну да, к своему) все ок, это я тупанул) спасибо большое)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@barbaris08 5 / 5 / 1 Регистрация: 09.05.2013 Сообщений: 93
	08.05.2014, 09:06 [ТС]
	Up! Мужики, требуется помощь, все еще актуально. 0

@barbaris08 5 / 5 / 1 Регистрация: 09.05.2013 Сообщений: 93
	11.05.2014, 00:53 [ТС]
	Faust971, спасибо большое, автопрокрутка работает, но при наведении курсора на слайдер она не останавливается) как сделать, чтобы остановилась? 0

@Faust971 69 / 69 / 50 Регистрация: 25.03.2012 Сообщений: 241
	11.05.2014, 13:05
	html структуру слайдера полностью приведи, разберемся, я походу неправильно класс контейнера указал. 0

@barbaris08 5 / 5 / 1 Регистрация: 09.05.2013 Сообщений: 93
	11.05.2014, 21:20 [ТС]
	Faust971, не работает) 0

@barbaris08 5 / 5 / 1 Регистрация: 09.05.2013 Сообщений: 93
	12.05.2014, 08:25 [ТС]
	Faust971, ну да, к своему) все ок, это я тупанул) спасибо большое) 0