Javascript.RU

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

как сделать Слайдер
Не могу разобраться, нужен слайдер с 4мя вкладками, у меня есть такой же только с тремя, как его переделать под 4, в коде js искать?
jQuery(document).ready(function(){
function htmSlider(){
/* Зададим следующие переменные */

/* обертка слайдера */
var slideWrap = jQuery('.slide-wrap');
/* ссылки на предудыщий иследующий слайд */
var nextLink = jQuery('.next-slide');
var prevLink = jQuery('.prev-slide');

var playLink = jQuery('.auto');

var is_animate = false;

/* ширина слайда с отступами */
var slideWidth = jQuery('.slide-item').outerWidth();

/* смещение слайдера */
var newLeftPos = slideWrap.position().left - slideWidth;

/* Клик по ссылке на следующий слайд */
nextLink.click(function(){
if(!slideWrap.is(':animated')) {

slideWrap.animate({left: newLeftPos}, 500, function(){
slideWrap
.find('.slide-item:first')
.appendTo(slideWrap)
.parent()
.css({'left': 0});
});

}
});

/* Клик по ссылке на предыдующий слайд */
prevLink.click(function(){
if(!slideWrap.is(':animated')) {

slideWrap
.css({'left': newLeftPos})
.find('.slide-item:last')
.prependTo(slideWrap)
.parent()
.animate({left: 0}, 500);

}
});


/* Функция автоматической прокрутки слайдера */
function autoplay(){
if(!is_animate){
is_animate = true;
slideWrap.animate({left: newLeftPos}, 500, function(){
slideWrap
.find('.slide-item:first')
.appendTo(slideWrap)
.parent()
.css({'left': 0});
is_animate = false;
});
}
}

/* Клики по ссылкам старт/пауза */
playLink.click(function(){
if(playLink.hasClass('play')){
playLink.removeClass('play').addClass('pause');
jQuery('.navy').addClass('disable');
timer = setInterval(autoplay, 1000);
} else {
playLink.removeClass('pause').addClass('play');
jQuery('.navy').removeClass('disable');
clearInterval(timer);
}
});

}

/* иницилизируем функцию слайдера */
htmSlider();
});
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать такой слайдер? DavidDavid Общие вопросы Javascript 6 30.04.2013 14:29
jQuery UI Slider - как синхронизировать слайдер со значнием? frightened jQuery 0 24.07.2011 00:19
Как убрать hover? Либо как сделать стрелки статичными? krusty36 Элементы интерфейса 1 13.07.2011 09:20
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06
Вопрос как сделать эту панельку Определённых размеров и свойств. jei jQuery 3 09.06.2009 19:14