Javascript.RU

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

Плавное пролистывание картинок слайдера
Добрый день.
Есть код. Задержка между сменой картинок присутствует, но вот чтобы сама картинка сдвигалась плавно добиться не могу. Помогите, пожалуйста.
var tim;
	window.onload = function() { // запуск слайдера после загрузки документа
		slider.init();
		tim = setInterval(function() { // ставим двухсекундный интервал для перелистывания картинок
			slider.right();
		},2000);
	};
	var slider = {
		slides: 5, //количество слайдов
		frame:0, // текущий кадр для отображения - номер картинки 
		set: function(image) { // установка нужного смещения картинки фона 
			document.getElementById("scr").style.backgroundPositionX = -image*225+"px";
		},
		init: function() { // запуск слайдера с картинкой с нулевым индексом
			this.set(0);
		},
		left: function() { // крутим на один кадр влево
			clearInterval(tim); //останавливаем автоматическую прокрутку карусели - чтобы не было скачков
			this.frame--;
			if(this.frame < 0) this.frame = this.slides-1; 
			this.set(this.frame);
			tim = setInterval(function() { // ставим пятисекундный интервал для перелистывания картинок, листаем в ту же сторону
				slider.left();
			},2000);
		},
		right: function() { // крутим на один кадр вправо
			clearInterval(tim);//останавливаем автоматическую прокрутку карусели - чтобы не было скачков
			this.frame++;
			if(this.frame == this.slides) this.frame = 0; //дошли до конца - переходим в начало
			this.set(this.frame);		
			tim = setInterval(function() { // ставим пятисекундный интервал для перелистывания картинок, листаем вправо
				slider.right();
			},2000);
		}
	};
Ответить с цитированием
  #2 (permalink)  
Старый 30.01.2017, 20:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,258

Corazon,
добавьте html и css
Ответить с цитированием
  #3 (permalink)  
Старый 30.01.2017, 20:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,258

Corazon,
может так ?
<style type="text/css">
       #scr{
         transition: all 1.2s ease-in-out;
       }

  </style>
Ответить с цитированием
  #4 (permalink)  
Старый 30.01.2017, 22:07
Интересующийся
Отправить личное сообщение для Corazon Посмотреть профиль Найти все сообщения от Corazon
 
Регистрация: 19.12.2016
Сообщений: 12

Действительно так. Совсем с курсачом туплю. Вперилась в js, а про стили и не подумала. Спасибо огромное!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавное появление картинок K_PECT Общие вопросы Javascript 4 24.03.2016 22:46
Плавное появление картинок realgleb Общие вопросы Javascript 4 02.09.2012 14:32
Плавное перемещение картинок в галерее Адриан Общие вопросы Javascript 0 09.02.2012 19:43
Как прекратить пролистывание картинок...? dopelher jQuery 2 13.10.2010 05:58
сделать плавное переключение картинок asker Библиотеки/Тулкиты/Фреймворки 2 11.09.2010 18:15