231 lines
6.8 KiB
JavaScript
231 lines
6.8 KiB
JavaScript
|
||
//Галерея изображений на первой странице сайта
|
||
class TCGallery
|
||
{
|
||
constructor(parent)
|
||
{
|
||
this.test=0;
|
||
|
||
//Конструктор
|
||
this.timeout_id =0;
|
||
this.parent=parent;
|
||
this.mas = this.getChildsMas(); //Массив элементов которые будут "Галереится"
|
||
this.mas.sort(function(a,b){return b.style.zIndex-a.style.zIndex;});
|
||
this.firstmas = [].concat(this.mas); //Первоначальный порядок элементов
|
||
this.btns = new Array();
|
||
}
|
||
|
||
work()
|
||
{
|
||
if(this.mas[0].style.opacity > 0.05)
|
||
{
|
||
this.mas[0].style.opacity = this.mas[0].style.opacity - 0.05;
|
||
this.timeout_id=setTimeout(()=>this.work(),50);
|
||
|
||
this.test++;
|
||
}else
|
||
{
|
||
//Перестовляем Z индексы первый на последнее место (больший наверху)
|
||
if(this.mas.length>0)
|
||
{
|
||
let z=this.mas[this.mas.length-1].style.zIndex;
|
||
for(let i=this.mas.length-1;i>0;i--)
|
||
{
|
||
this.mas[i].style.zIndex=this.mas[i-1].style.zIndex
|
||
}
|
||
this.mas[0].style.zIndex=z;
|
||
}
|
||
|
||
//Поменяли местами востанавливаем прозрачность
|
||
for(let i=0;i<this.mas.length;i++)
|
||
{ this.mas[i].style.opacity = 1;
|
||
}
|
||
this.mas.sort(function(a,b){return b.style.zIndex-a.style.zIndex;}); //Сортируем с макс Z индексом наверху в 0ле
|
||
this.timeout_id=setTimeout(()=>this.work(),5000); //Перезапускаем таймер через 10 секунд с максимальным Z индексом
|
||
this.selected();
|
||
this.test++;
|
||
}
|
||
}
|
||
//Стартуем галерею
|
||
Init()
|
||
{
|
||
let maxz=0;
|
||
for(let i=0;i<this.mas.length;i++)
|
||
{ this.mas[i].style.opacity = 1;
|
||
if(maxz<this.mas[i].style.zIndex) maxz=this.mas[i].style.zIndex;
|
||
}
|
||
if(this.mas.length>0)
|
||
setTimeout(()=>this.work(),5000);
|
||
maxz++;
|
||
|
||
//Кнопочки для переключения картинок
|
||
let cdv=document.createElement('div');
|
||
cdv.style.cssText='opacity: 0.7; display: block; position: absolute; bottom: 5px; right: 5px; z-index: '+maxz+'; border: solid 0px red;';
|
||
for(let i=0;i<this.mas.length;i++)
|
||
{
|
||
let btn=document.createElement('div');
|
||
btn.style.cssText='cursor: pointer; background-color: #eeeeee; text-align: center; display: inline-block; margin: 2px; border: solid 1px black; width: 17px;';
|
||
btn.appendChild(document.createTextNode(i+1));
|
||
btn.onclick = function(thiz,i){return function(){ thiz.moveTo(i); }; }(this,i);
|
||
cdv.appendChild(btn);
|
||
this.btns.push(btn);
|
||
}
|
||
this.parent.appendChild(cdv);
|
||
if(this.btns.length>0) this.btns[0].style.backgroundColor='#f3af5a';
|
||
}
|
||
//Переместить на заданный слой (позиция с 0)
|
||
moveTo(pos)
|
||
{
|
||
if(pos<0 || pos>this.firstmas.length - 1) return;
|
||
let elm=this.firstmas[pos];
|
||
for(let j=0;j<this.mas.length;j++)
|
||
{
|
||
if(this.mas[0]==elm) break;
|
||
|
||
let z=this.mas[this.mas.length-1].style.zIndex;
|
||
for(let i=this.mas.length-1;i>0;i--)
|
||
{
|
||
this.mas[i].style.zIndex=this.mas[i-1].style.zIndex
|
||
}
|
||
this.mas[0].style.zIndex=z;
|
||
this.mas.sort(function(a,b){return b.style.zIndex-a.style.zIndex;});
|
||
}
|
||
//Поменяли местами востанавливаем прозрачность
|
||
for(let i=0;i<this.mas.length;i++)
|
||
{ this.mas[i].style.opacity = 1.0;
|
||
}
|
||
|
||
clearTimeout(this.timeout_id)
|
||
this.timeout_id=setTimeout(()=>this.work(),10000);
|
||
this.selected();
|
||
}
|
||
//Поменялся элемент
|
||
selected()
|
||
{
|
||
let pos=0;
|
||
for(let i=0;i<this.firstmas.length;i++)
|
||
{ if(this.mas[0]==this.firstmas[i])
|
||
{ pos=i;
|
||
break;
|
||
}
|
||
}
|
||
//Обнуляем стили
|
||
for(let i=0;i<this.btns.length;i++)
|
||
this.btns[i].style.backgroundColor='#eeeeee';
|
||
//Выставляем стиль для выбранного элемента
|
||
this.btns[pos].style.backgroundColor='#f3af5a';
|
||
}
|
||
|
||
//Private
|
||
//Получить детей в виде массива
|
||
getChildsMas()
|
||
{
|
||
let mas = new Array();
|
||
if(this.parent!==null)
|
||
{
|
||
let child = this.parent.firstChild;
|
||
while(child){
|
||
if(typeof child.style !== "undefined"){ //Только те где есть стиль
|
||
mas.push(child);
|
||
}
|
||
child = child.nextSibling;
|
||
}
|
||
}
|
||
return mas;
|
||
}
|
||
//Private
|
||
//Получить позицию по объекту (-1 если ненайден)
|
||
getPos(obj)
|
||
{
|
||
for(let i=0;i<this.firstmas.length;i++)
|
||
{ if(this.firstmas[i]==obj) return i;
|
||
}
|
||
return -1;
|
||
}
|
||
}
|
||
|
||
//Галерея изображений на странице товара (Двигается в право в лево)
|
||
class TCGallery2
|
||
{
|
||
constructor(parent) {
|
||
this.parent=parent; //Элемент который будем двигать в право в лево
|
||
|
||
this.mas = new Array(); //Массим элементов с рисуночками
|
||
this.pos=0;
|
||
this.ower=true;
|
||
|
||
this.iWidth=200; //Размер картинки по умолчанию
|
||
|
||
// повторить с интервалом 2 секунды
|
||
setInterval(() => this.resize(), 1000);
|
||
}
|
||
|
||
//Подстраиваюсь под размер родительского компонента
|
||
resize()
|
||
{
|
||
let pDiv = this.parent.parentElement;
|
||
|
||
this.parent.style.width = pDiv.offsetWidth+'px';
|
||
}
|
||
|
||
//Добавляю кнопочки для переключения картинок
|
||
addImage(small)
|
||
{
|
||
this.mas.push({div: small, sell: false});
|
||
|
||
small.onmouseover = function(thiz,small)
|
||
{ return function()
|
||
{
|
||
if(!thiz.ower) return;
|
||
|
||
let pos=-1;
|
||
for(let i=0;i<thiz.mas.length;i++) if(small===thiz.mas[i].div) { pos=i;} //Позиция элемента в массиве
|
||
if(pos===-1) return;
|
||
|
||
if(thiz.ower && pos!== thiz.pos )
|
||
{ thiz.pos=pos * 400;
|
||
thiz.moveTo();
|
||
}
|
||
};
|
||
}(this,small);
|
||
|
||
small.onclick = function(thiz,small)
|
||
{ return function()
|
||
{
|
||
|
||
let pos=-1;
|
||
for(let i=0;i<thiz.mas.length;i++) if(small===thiz.mas[i].div) { pos=i; } else { thiz.mas[i].div.style.borderColor="#dfdfdf"; thiz.mas[i].sell=false; } //Позиция элемента в массиве
|
||
if(pos===-1) return;
|
||
|
||
if(!thiz.mas[pos].sell) //Если щёлкнули на выделеное 1й раз
|
||
{ thiz.mas[pos].sell = true;
|
||
thiz.ower=false;
|
||
small.style.borderColor='#999999';
|
||
}else
|
||
{ thiz.mas[pos].sell = false;
|
||
thiz.ower=true;
|
||
small.style.borderColor='#dfdfdf';
|
||
}
|
||
|
||
if(pos!== thiz.pos )
|
||
{ thiz.pos=pos * 400;
|
||
thiz.moveTo();
|
||
}
|
||
};
|
||
}(this,small);
|
||
|
||
};
|
||
|
||
//Плавная прокрутка по горизонтали
|
||
moveTo()
|
||
{
|
||
if(this.parent==null) return;
|
||
var dx=(this.pos - this.parent.scrollLeft)/20.0; //Шагов для достижения нужного положения
|
||
if(dx>0) dx=Math.ceil(dx); else dx=Math.floor(dx);
|
||
this.parent.scrollLeft+=dx;
|
||
if(this.parent.scrollLeft!=this.pos)
|
||
setTimeout(()=>this.moveTo(),10);
|
||
}
|
||
|
||
}
|