Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.10.2013, 12:27
Новичок на форуме
Отправить личное сообщение для d1am Посмотреть профиль Найти все сообщения от d1am
 
Регистрация: 01.10.2013
Сообщений: 3

Слайдер с автоматическим листанием
Всем доброго дня.
Прошу совета - мне нужно, чтобы слайды (элементы li из класса main-slider) листались автоматически после загрузки страницы и останавливались при наведении мыши.

Имеется кусок кода, в котором реализовано перелистывание по стрелкам по событию hover (он корректный, этот кусок я не пишу). Я ставлю действие, которое соответствует стрелке "вперед", на событие ready. Но получаю, что естественно, при запуске страницы я получаю однократное действие "слайд вперед".

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

(function($){
 
$(document).ready(function(){
 
// НАЧАЛО: автоматическое перелистывание слайдов
$(".main-slider > li").ready(
 
    function () {
    
    var ul = $('.main-slider');
        var list = $('.main-slider li');
 
        var curindex = 0;
        var pos=[];
        list.each(function(){
            pos.push($(this).position().left);
        });
 
        var offset = ul.position().left*-1;
        
        for(var curindex=0;pos[curindex]<offset;curindex++);
 
        if(curindex<pos.length-3){
        
            curindex++;
            
        }else{
            ul.css('left' , -1* pos[pos.length-4]);
            list.eq(0).insertAfter(list.eq(list.length-1));
            ul.animate({left: -1* pos[pos.length-3]}, {queue: false});
        }
 
        ul.animate({'left':-1*pos[curindex]});
 
    return false;
    }
);  
// КОНЕЦ: автоматическое перелистывание слайдов
    
});
 
})(jQuery);
Ответить с цитированием
  #2 (permalink)  
Старый 01.10.2013, 15:39
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

d1am,
Ну есть готовая демка, если желаете Слайд шоу на библиотеке jQuery
Ответить с цитированием
  #3 (permalink)  
Старый 01.10.2013, 16:01
Новичок на форуме
Отправить личное сообщение для d1am Посмотреть профиль Найти все сообщения от d1am
 
Регистрация: 01.10.2013
Сообщений: 3

Сообщение от Deff Посмотреть сообщение
d1am,
Ну есть готовая демка, если желаете Слайд шоу на библиотеке jQuery
Спасибо! Но все-таки очень хочется допилить свой вариант
Когда ротируются не img, а списки <li> представляется больше возможностей, т.к. можно разместить и картинку и html-текст.
Ответить с цитированием
  #4 (permalink)  
Старый 01.10.2013, 18:55
Новичок на форуме
Отправить личное сообщение для d1am Посмотреть профиль Найти все сообщения от d1am
 
Регистрация: 01.10.2013
Сообщений: 3

Немного продвинулся вперед, но опять наткнулся на сложность. Благодаря форуму понял, что для зацикленной анимации нужно использовать callback в animate - прописать в нем условие повторения.

Изменил строку
ul.animate({'left':-1*pos[curindex]});
. Добавил еще интервал.

Получил следующее:

setInterval(function() {
	      ul.animate({'left':-1*pos[curindex]}, 500, function() { 
		  
		// начало повторяющейся функции		
			curindex++;		
		// конец повторяющейся функции
		  });
	   }, 500)


Но в данном случае все слайды проходят один раз и останавливаются. Прописываю вместо
curindex++;
условие:
if(curindex<pos.length-3){ // в слайдере 3 блока
			curindex++;
}else{
			ul.css('left' , -1* pos[pos.length-4]);
			list.eq(0).insertAfter(list.eq(list.length-1));
			ul.animate({left: -1* pos[pos.length-3]}, {queue: false});
}

И тут спотыкаюсь - слайдер начинает некорректно листаться, когда приступает к выполнению "else" (после того как пролистал первые 3 блока). Эти вычисления писал не я, поэтому я в них не могу разобраться.
Буду рад, если кто-то подскажет.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Слайдер во время загрузки страницы v.v.dankiv jQuery 0 14.04.2013 11:16
Слайдер с помощью CSS и jQuery - 1000 р. stixia007 jQuery 21 27.03.2013 21:44
Слайдер с перемоткой в двух разных блоках Джэй jQuery 0 15.10.2012 23:08
Нужно отредактировать слайдер glavkot Работа 0 22.08.2011 14:14
jQuery UI Slider - как синхронизировать слайдер со значнием? frightened jQuery 0 24.07.2011 00:19