html正方形相册,HTML代码如何创建相册

刚毅87

html>

#wrap{

width: 1000px;

height: 600px;

border:1px solid red;

position: relative;

margin: 0 auto;

overflow: hidden;

}

#mid{

width: 1000000000000000000px;

height: 100%;

position: absolute;

left: 0;

top: 0;

transition: all  0.5s;

}

#mid img{

width: 1000px;

float: left;

}

#btns{

position: absolute;

right:100px;

bottom: 100px;

}

#btns a{

text-decoration: none;

}

<

>

//上一页按钮

var lastBtn = document.getElementById('last');

//下一页按钮

var nextBtn = document.getElementById('next');

var mid = document.getElementById('mid');

//点击下一张

var index = 0;

nextBtn.onclick = function(){

index++;

if (index > 3) {

index = 0;

}

mid.style.left = -index * 1000 + 'px';

}

lastBtn.onclick = function(){

index--;

if(index 

index = 3;

}

mid.style.left = -index * 1000 + 'px';

}

图片换成你的就行了,注意图片的名称.望采纳