html 相册是什么？有什么用？

html相册就是把一组图片放到一个固定位置轮番滚动查看，一般是类似于qq相册的功能。

代码如下：

<script language="javascript">

//定义img图库

var img = ["","images/1.gif","images/2.gif","images/3.gif","images/4.gif"]//最前面留一个空白位置

//轮番显示

function show(op){

if(Number(op)){

// 取得对应的图片

document.getElementById("img1").src=img[op]

}

}

</script>

//设置图片显示样式

<style type="text/css">

li{

float:left

height:15px

background-color:#FF66FF

border:1px #00FFFF dotted

line-height:15px

}

a{

color:#00FFFF

text-decoration:none

}

</style>

以下是html代码，设置一个img控件，长和宽都是50个像素

<img src="images/1.gif" id="img1" width="50" height="50" />

<ul style="list-style-type:nonewidth:200px">

<li><a href="#" onclick="show(1)">1</a></li><!--点击显示第一张图-->

<li><a href="#" onclick="show(2)">2</a></li><!--点击显示第二张图-->

<li><a href="#" onclick="show(3)">3</a></li><!--点击显示第三张图-->

<li><a href="#" onclick="show(4)">4</a></li><!--点击显示第四张图-->

</ul>

旋转index文件代码：

3D旋转相册

*{

padding:0

margin:0

}

body,

html{

height:100%

}

/*背景图片在这里设置*/

body{

background-image:url("images/beijing.jpg")

background-size:100%100%

}

#box{

width:280px

height:400px

position:fixed

left:0

right:0

top:0

bottom:0

margin:auto

transform-style:preserve-3d

transform:rotateX(0deg)rotateY(0deg)

animation:go45slinearinfinite

}

#boximg{

width:280px

height:400px

position:absolute

left:0

top:0

}

#boximg:nth-child(1){

transform:rotateY(0deg)translateZ(650px)

}

#boximg:nth-child(2){

transform:rotateY(36deg)translateZ(650px)

}

#boximg:nth-child(3){

transform:rotateY(72deg)translateZ(650px)

}

#boximg:nth-child(4){

transform:rotateY(108deg)translateZ(650px)

}

#boximg:nth-child(5){

transform:rotateY(144deg)translateZ(650px)

}

#boximg:nth-child(6){

transform:rotateY(180deg)translateZ(650px)

}

#boximg:nth-child(7){

transform:rotateY(216deg)translateZ(650px)

}

#boximg:nth-child(8){

transform:rotateY(252deg)translateZ(650px)

}

#boximg:nth-child(9){

transform:rotateY(288deg)translateZ(650px)

}

#boximg:nth-child(10){

transform:rotateY(324deg)translateZ(650px)

}

@keyframesgo{

0%{

transform:rotateX(0deg)rotateY(0deg)

}

25%{

transform:rotateX(20deg)rotateY(180deg)

}

50%{

transform:rotateX(0deg)rotateY(360deg)

}

75%{

transform:rotateX(-20deg)rotateY(540deg)

}

100%{

transform:rotateX(0deg)rotateY(720deg)

}

}

images/1.jpg

images/2.jpg

images/3.jpg

images/4.jpg

images/5.jpg

images/6.jpg

images/7.jpg

images/8.jpg

images/9.jpg

images/10.jpg

现在的网页相册，一般是使用javascript和其它动态程序结合在一起制作的。

ACDSEE等软件制作的相册基本上是html编写的，和现在的网页相册自然缺少很多动画的效果。

你可以去找一找jquery网页相册源代码，这种代码有不少，有些效果是很新颖的。如果能够学习一下javascript以及一门动态编程技术，那么运用jquery制作网络相册或其他页面特效就会更感觉方便了。

---