代码如下：
<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
可以用ppt、数码大师，看你个擅长哪一种，如果没接触过，那建议使用数码大师简单易用。
数码大师支持导出各种种类的电子相册，以满足不同的需求，如方便发送，用于上传网络、在本机上欣赏、在浏览器播放等等。
操作步骤：
1、将你们平时的照片导入软件中；
2、添加个人喜欢的音乐歌曲，如不需要刻意跳过此步；
3、设置相片字幕和特效，制作真情感人的婚庆电子相册（在“滚动文字和歌词”、“注释”选项卡可设置文字特效展示方式。点击“修改名字及注释”按钮，在弹出的对话框中可详细相片名和注释，为每张相片写入独特的文字；
4、点击“相片特效”选项卡，可通过“应用特效到指定相片”为每张相片指定特效。如果追求快速制作的，软件会为相片默认随机特效，自由灵活和快速智能兼容有之。软件的相片特效多达数百种；
5、为相片配上特别的相框，别有一番情调，点击左边的“相框”选项卡，几十种精致相框任挑，很快速就可以为相片添加上相框。
6、设计一个漂亮的封面，就能达到这种效果了，你可以为相册设计一个特殊含义的标题，还能写上序言，表达双方的浓浓情意。一切设置完毕后，就可以点击右下角的“开始导出”按钮，将精心制作的电子相册极速导出了。不用一分钟，你就可以好好欣赏自己的杰作了哦。
