Показать сообщение отдельно
  #1 (permalink)  
Старый 31.03.2015, 16:21
Аватар для Babyslam
Интересующийся
Отправить личное сообщение для Babyslam Посмотреть профиль Найти все сообщения от Babyslam
 
Регистрация: 25.02.2015
Сообщений: 26

Анимация слайдера.
Добрый день. Нужно сделать : При клике вперед старый слайд уходит влево, а новый выезжает справа (как будто выталкивая старый слайд). Не могу реализовать одновременную анимацию.
$(function () {
	var elWrap = $('#slider'),
		el =  elWrap.find('img'),
		indexImg = 1,
		indexMax = el.length,
		phase = 2000;
function change () {
el.animate({"left": "-=700px"}, {queue: false});
		el.fadeOut();
		el.filter(':nth-child('+indexImg+')').fadeIn( function() {
    el.animate({"left": "+=700px"});
  });
elWrap.append('<span class="next"></span><span class="prev"></span>');
	var	btnNext = $('span.next'),
		btnPrev = $('span.prev');
		
	btnNext.click(function() {
	
		indexImg++;
		if(indexImg > indexMax) {
			
			indexImg = 1;
		}
		change ();
	});
	btnPrev.click(function() {
	
		indexImg--;
		if(indexImg < 1) {
			indexImg = indexMax;
		}
		
		change ();
	});
	
	});

<div id="slider" class="slider_wrap">
		<img src="slider_image1.jpg" alt="" />
		<img src="slider_image2.jpg" alt="" />
		<img src="slider_image3.jpg" alt="" />
	</div>

http://hostingfortraineeship.esy.es/java4/ готовый макет

Последний раз редактировалось Babyslam, 31.03.2015 в 21:10. Причина: Добавление
Ответить с цитированием