类似qq空间预览图片插件

首次接触面向对象编程，写了一个类似qq空间预览相册的图片小东西，没什么难点，代码有点low，见笑了，代码如下

只是用于记录学习，实用性可能不是太强

//实例化相册 的对象

new show(yArr,nArr)   // 原图和缩略图的集合

// m-list-content-item  需要触发的含有图片的盒子类名，只是用作触发，图片显示依然根绝实例化时传的数组为准

function  show(items,navItems) {

this.imgs = items;// 所有图片集合

this.navImgs = navItems;// 所有缩略图集合 ，  imgs 和 navImgs 应该一一对应，区别只是navImgs 是缩略图

this.a = false;

/*当前已经滚动的长度*/

this.roundLong = 0;

/*当前图片所在下标*/

this.imgIndex = 0;

this.initElem();

this.initEvent(); // 事件需要调用 elem

/*

* 获取图片列表*/

};

show.prototype = {

constructor:show,

/*

* 初始化所有元素*/

initElem:function () {

/*网页宽高*/

this.widWidth = document.documentElement.clientWidth < 960 ? 960 :  document.documentElement.clientWidth;

this.winHeight = document.documentElement.clientHeight;

/*获取所有的图片*/

this.items = document.getElementsByClassName('m-list-content-item');

/*

*

* 结构

* div.fixedDiv

*      div.twoDiv

*          div.imgDiv

*              img

*              rightDiv

*              leftDiv

*          div.navDiv

*              span.RDiv

*              span.LDiv

*              div.ulDiv

*                  ul.ul

*      div.closeDiv

*

* */

this.fixedDiv = document.createElement('div');

this.twoDiv = document.createElement('div');

this.imgDiv = document.createElement('div');

this.img = document.createElement('img');

this.closeDiv = document.createElement('span');

this.navDiv = document.createElement('div');

this.RDiv = document.createElement('span');

this.LDiv = document.createElement('span');

this.ulDiv = document.createElement('div');

this.ul = document.createElement('ul');

this.ul.id = 'ptId';

this.rightDiv = document.createElement('div');

this.leftDiv = document.createElement('div');

/* fixedDiv*/

this.fixedDiv.style.position='fixed';

this.fixedDiv.style.padding='20px 0';

this.fixedDiv.style.width = '100%';

this.fixedDiv.style.height = '100%';

this.fixedDiv.style.background = 'rgba(0,0,0,.5)';

this.fixedDiv.style.zIndex='2';

this.fixedDiv.style.top='0';

this.fixedDiv.style.display= 'none';

document.body.appendChild(this.fixedDiv);

/*

* 第二层容器*/

this.twoDiv.style.width = (this.widWidth * 0.6)+'px';

this.twoDiv.style.minWidth = this.widWidth*0.6+'px';

this.twoDiv.style.height = (this.winHeight - 40)+'px';

this.twoDiv.style.margin = '0 20%';

this.twoDiv.style.position=this.imgDiv.style.position='relative';

this.twoDiv.style.background = 'rgba(0,0,0,.8)';

this.fixedDiv.appendChild(this.twoDiv);

/*

*t图片容器

* */

this.imgDiv.style.width='100%';

this.imgDiv.style.height=(this.winHeight - 40)*0.8 +'px';

this.imgDiv.style.lineHeight=(this.winHeight - 40)*0.8 +'px';

this.imgDiv.style.padding='20px 0';

this.imgDiv.style.textAlign='center';

/*

* rightDiv leftDiv*/

this.rightDiv.style.width = this.leftDiv.style.width = '30%';

this.rightDiv.style.height = this.leftDiv.style.height = '100%';

this.rightDiv.style.top = this.leftDiv.style.top = '0';

this.rightDiv.style.right=this.leftDiv.style.left='0';

this.rightDiv.style.textAlign='right';

this.leftDiv.style.textAlign='left';

this.rightDiv.style.fontSize=this.leftDiv.style.fontSize='58px';

this.rightDiv.style.paddingRight=this.leftDiv.style.paddingLeft='20px';

this.rightDiv.innerText='>';

this.leftDiv.innerText='<';

/*图片标签*/

this.img.style.maxWidth='100%';

this.img.style.verticalAlign='middle';

this.img.style.maxHeight='100%';

this.img.src = '';

/*关闭整个div按钮*/

this.closeDiv.style.display='inline-block';

this.closeDiv.style.width='80px';

this.closeDiv.style.height='80px';

this.closeDiv.innerText='X';

this.closeDiv.style.background='#000';

this.closeDiv.style.position=this.navDiv.style.position=this.rightDiv.style.position = this.leftDiv.style.position='absolute';

this.closeDiv.style.top='-30px';

this.closeDiv.style.right='-30px';

this.closeDiv.style.borderRadius='50%';

this.closeDiv.style.cursor=this.RDiv.style.cursor=this.LDiv.style.cursor=this.rightDiv.style.cursor=this.leftDiv.style.cursor='pointer';

this.closeDiv.style.color='#fff';

/*

* 底部滚动*/

this.navDiv.style.background='#fff';

this.navDiv.style.bottom='0';

this.navDiv.style.width='100%';

this.navDiv.style.height='100px';

/*

* 底部滚动条内部*/

this.RDiv.style.cssFloat='right';

this.LDiv.style.cssFloat='left';

this.RDiv.style.background=this.LDiv.style.background='#000';

this.RDiv.style.display=this.LDiv.style.display='block';

this.RDiv.style.width=this.LDiv.style.width='60px';

this.RDiv.style.height=this.LDiv.style.height='100%';

this.RDiv.style.color=this.LDiv.style.color=this.rightDiv.style.fontSize=this.leftDiv.style.fontSize='#d7d7d7';

this.RDiv.style.fontSize=this.LDiv.style.fontSize='38px';

this.RDiv.style.textAlign=this.LDiv.style.textAlign='center';

this.RDiv.style.lineHeight=this.LDiv.style.lineHeight='100px';

this.RDiv.innerText='>';

this.LDiv.innerText='<';

this.ulDiv.style.background='#000';

this.ulDiv.style.cssFloat='left';

this.ulDiv.style.width=(this.widWidth * 0.6)-120 +'px';

this.ulDiv.style.height= '100%';

this.ulDiv.style.overflow= 'hidden';

/*ul*/

console.log(this.imgs.length);

this.ul.style.width = (this.imgs.length * 80)+'px';

this.clerDiv = document.createElement('div');

this.clerDiv.style.clear='both';

this.twoDiv.appendChild(this.navDiv);

this.imgDiv.appendChild(this.img);

this.imgDiv.appendChild(this.rightDiv);

this.imgDiv.appendChild(this.leftDiv);

this.twoDiv.appendChild(this.imgDiv);

this.fixedDiv.appendChild(this.closeDiv);

this.ul.appendChild(this.clerDiv);

this.ulDiv.appendChild(this.ul);

this.navDiv.appendChild(this.LDiv);

this.navDiv.appendChild(this.ulDiv);

this.navDiv.appendChild(this.RDiv);

/*图片列*/

/*

/*

* 评论容器  /./.  保留 */

// this.commentsDiv =document.createElement('div')

},

/*

* 初始化所有事件*/

initEvent:function () {

let arr = [...this.items];

arr.forEach((v,i)=>{

v.addEventListener('click',(e)=>{

e.stopPropagation();

/*记录当前位置 position*/

this.position = i;

console.log(this.position);

this.urlClickEvent(i);

this.inThe(this.navImgs,i);

})

});

/*点击右边，展示下一张图片*/

this.rightDiv.addEventListener('click',()=>{

if(this.position < this.imgs.length-1){

this.img.src = this.imgs[this.position + 1];

// this.ulLiArr

this.ulLi[this.position].style.border = 'none';

this.ulLi[this.position+1].style.border = '3px solid #d7d7d7';

this.roundLong = this.roundLong+70;

this.RLDivEvent()

this.position++;

}

});

/*点击左边，展示上一张图片*/

this.leftDiv.addEventListener('click',()=>{

if(this.position > 0){

this.img.src = this.imgs[this.position - 1];

this.ulLi[this.position].style.border = 'none';

this.ulLi[this.position-1].style.border = '3px solid #d7d7d7';

this.roundLong = this.roundLong-70;

this.RLDivEvent();

this.position--;

}

});

/*关闭显示层*/

this.closeDiv.addEventListener('click',()=>{

this.closeEvent()

});

/*底部左右滚动*/

this.RDiv.addEventListener('click',()=>{

// console.log((this.imgs.length * 80)-this.roundLong-((this.widWidth * 0.6)-120));  ul长度-已经位移长度-下面显示长度

if(((this.imgs.length * 80)-this.roundLong-((this.widWidth * 0.6)-120))>0){

this.roundLong = this.roundLong+((this.widWidth * 0.6)-120);

this.RLDivEvent()

}

});

/*点击底部 左边按钮向左滚动*/

this.LDiv.addEventListener('click',()=>{

if(this.roundLong>0){

this.roundLong = this.roundLong-((this.widWidth * 0.6)-120);

this.RLDivEvent()

}

});

/*LDiv RDiv 鼠标悬浮改变颜色*/

let that = this;

this.RDiv.addEventListener('mouseover',function (e) {

that.RLDivMouseEvent(this,e)

});

this.RDiv.addEventListener('mouseout',function (e) {

that.RLDivMouseEvent(this,e)

});

this.LDiv.addEventListener('mouseover',function (e) {

that.RLDivMouseEvent(this,e)

});

this.LDiv.addEventListener('mouseout',function (e) {

that.RLDivMouseEvent(this,e)

});

this.leftDiv.addEventListener('mouseover',function (e) {

that.RLDivMouseEvent(this,e)

});

this.leftDiv.addEventListener('mouseout',function (e) {

that.RLDivMouseEvent(this,e)

});

this.rightDiv.addEventListener('mouseover',function (e) {

that.RLDivMouseEvent(this,e)

});

this.rightDiv.addEventListener('mouseout',function (e) {

that.RLDivMouseEvent(this,e)

})

},

/*

*相册图片 点击事件，展示相册*/

urlClickEvent:function (i) {

this.fixedDiv.style.display= 'block';

this.img.src = this.imgs[i]

},

/*关闭相册*/

closeEvent:function () {

this.fixedDiv.style.display= 'none';

/*将ul里面的所有li清除掉*/

let liArr = document.getElementsByClassName('ulLi');

console.log(liArr.length)

for (let i=liArr.length;i>0;i--){

this.ul.removeChild(liArr[i-1])

}

},

/*将图片放到下面滚动条去*/

inThe:function (v,i) {

v.forEach((item,index)=>{

this.li = document.createElement('li');

this.image=document.createElement('img');

this.image.src=item;

this.image.style.width='100%';

this.image.style.height='100%';

this.li.appendChild(this.image);

this.li.style.height = '50px';

this.li.className = 'ulLi';

this.li.style.textAlign = 'center';

this.li.style.lineHeight = '50px';

this.li.style.cssFloat = 'left';

this.li.style.margin = '25px 10px';

this.li.style.listStyleType = 'none';

this.li.style.width = '50px';

this.li.style.cursor='pointer';

this.ul.appendChild(this.li);

/*i === index  进行匹配*/

if(i===index){

this.li.style.border='3px solid #d7d7d7';

}

})

/*li  鼠标悬浮，点击*/

let  ulLi = document.getElementsByClassName('ulLi');

let ulLiArr = [...ulLi];

this.ulLiArr = ulLiArr;

this.ulLi = ulLi;

ulLiArr.forEach((v,i)=>{

v.addEventListener('mouseover',()=>{

ulLi[i].classList.add('li-active')

});

v.addEventListener('mouseout',()=>{

ulLi[i].classList.remove('li-active')

});

v.addEventListener('click',()=>{

ulLi[this.position].style.border = 'none';

ulLi[i].style.border = '3px solid #d7d7d7';

this.position = i;

this.img.src = this.imgs[i]

});

})

},

/*左右滚动*/

RLDivEvent:function () {

this.ul.style.transform='translateX(-'+this.roundLong+'px)';

this.ul.style.transition='.5s';

},

/*lDiv Rdiv 悬浮改变颜色*/

RLDivMouseEvent:function (t,e) {

console.log()

e.type==='mouseout' ? t.style.color='#d7d7d7' : t.style.color='#fff';

}

}