Показать сообщение отдельно
  #1 (permalink)  
Старый 15.03.2016, 12:25
Новичок на форуме
Отправить личное сообщение для frontmaker Посмотреть профиль Найти все сообщения от frontmaker
 
Регистрация: 15.03.2016
Сообщений: 7

Проблемы с разработкой слайдера
Пытаюсь написать слайдер с автоматическим переключением, вроде получилось, но код выглядит ужасно.Прошу помощи в оценке.
var sliderInit = (function(){
	'use strict'

	function Slider() {
	this.controls = document.querySelector('.controls');
	this.buttons = document.querySelectorAll('.controls__btn');
	this.slider = document.querySelector('.slider');
	this.slide = document.querySelector('.slide');


	this.start = function(time) {
		this.updateClass();
		this.changeSlide();
		this.timer(time)
	}
}


Slider.prototype.updateClass = function() {
	var that = this;
	this.controls.onclick = function(e) {
		var btn = e.target;
		if (btn.tagName === "A") {
			e.preventDefault();
			that.checkClass("active");
			that.changeSlide(btn);
			btn.classList.toggle('active');
		}
	}
}


Slider.prototype.checkClass = function(className) {
	[].filter.call(this.buttons, function(btn) {
		if (btn.classList.contains(className)) {
			btn.classList.remove(className);
		}
	});
}


Slider.prototype.timer = function(time) {
	var i = 0,
	that = this;
	length = this.buttons.length;

	var timerId = setInterval(function(){
		that.checkClass('active');
		that.buttons[i].classList.toggle('active');
		var btn = that.buttons[i];
		that.changeSlide(btn);
		i++;
		if (i === length) {
			i = 0;
		};
	},time);

}


Slider.prototype.changeSlide = function(btn) {
		btn = btn || this.buttons[0];
		var index = btn.getAttribute('data-index');
		var width = -(this.slide.clientWidth) - 50; //margin-right
		switch(index) {
		case "1": 
			this.slider.style.webkitTransform = "translate3d(0px, 0px, 0px)";
		break;
		case "2":
			this.slider.style.webkitTransform = "translate3d(" + width + "px, 0px, 0px)";
		break;
		case "3":
			this.slider.style.webkitTransform = "translate3d("+ width * 2 + "px, 0px, 0px)";
		}
	}

	return Slider;

})();


var slider = new sliderInit();

slider.start(2000);
Ответить с цитированием