打开ps软件，新建一个1200*800像素的白色画布。命名为：相册模板！方便保存之后查找。

请点击输入图片描述

在左侧的工具栏中，1、点击颜色设置为【绿色：669c00】。 2、点击绘图工具选择【矩形工具】。3、填充颜色为白色，描边颜色选择【绿色：669c00】，2点像素描边。 4、在白色的画布上画一个长方形的图形。

请点击输入图片描述

画好一个长方形图之后，再复制出两个长方形图，移动到合适的位置上。按住CTRL+T调整图形大小，注意：图形不要一样大的，最好是有大有小，看起来有层次感。

请点击输入图片描述

在左侧的工具栏中，1、点击颜色设置为灰色。 2、点击绘图工具选择【直线工具】。3、填充颜色为白色。4、描边颜色选择灰色2点像素描边，在白色的画布上画出一条直线。

请点击输入图片描述

画好一条直线之后，再复制出一条直线，点击【编辑】——【变换】——【旋转90度顺时针】。将旋转好的直线移动合适的位置上即可。

请点击输入图片描述

在左侧的工具栏中，1、点击颜色设置为【绿色：669c00】,再点击T，然后输入相册想要表达的主题文字，比如：“爱笑的女孩”，设置为方正字体，字号为55号。

请点击输入图片描述

在主题文字的右上角和左下角处，分别输入一些英文字，颜色为灰色，字体任意一个都可以的，因为这些英文不用显示那么清楚的，模模糊糊的效果是最好的，字号为9号。

请点击输入图片描述

插入一张透明底的装饰图片，按住CTRL+T调整图片大小，现在图片中的蝴蝶是向右的，选中蝴蝶的图层点击【编辑】——【变换】——【水平翻转】移动至文字的右边。

请点击输入图片描述

请点击输入图片描述

相册设置基本定形了，就差相册的图片了。插入三张图片，可以选择自己拍的照片，然后按住键盘的快捷键按钮【Ctrl+Alt+G】放图片分别放入相册框里即可。

请点击输入图片描述

请点击输入图片描述

10

设置颜色为橙色，用矩形工具分别在左上角和右下角处，绘画出一个长方形的图形作为装饰。插入自定义图形，选择一个花朵的样式，先画出一个，然后再复三个，按住方向键移动到灰色直线的十字架的边缘处，作为点缀效果。相册设计已经全部制作完成了，记得保存。

请点击输入图片描述

请点击输入图片描述

<div id="tbody">

<span class="txt_1">横向的JS相册效果</span>

<div id="mainbody">

<img src="images/01.jpg" alt="横向JS相册" width="640" height="400" id="mainphoto" rel="images/01.jpg" name="#" />

</div>

<img src="images/goleft.gif" width="11" height="56" id="goleft" />

<img src="images/goright.gif" width="11" height="56" id="goright" />

<div id="photos">

<div id="showArea">

<!--src: 缩略图地址 rel: 大图地址 name: 网址 -->

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/02.jpg" alt="横向JS相册" width="80" height="50" rel="images/02.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/02.jpg" alt="横向JS相册" width="80" height="50" rel="images/02.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/02.jpg" alt="横向JS相册" width="80" height="50" rel="images/02.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/02.jpg" alt="横向JS相册" width="80" height="50" rel="images/02.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

<img src="images/02.jpg" alt="横向JS相册" width="80" height="50" rel="images/02.jpg" name="#" />

<img src="images/01.jpg" alt="横向JS相册" width="80" height="50" rel="images/01.jpg" name="#" />

</div>

</div>

</div>

[CSS部分]

body {background:#000margin:0font:12px Verdanatext-align:center}

#tbody {width:650pxmargin:20px autotext-align:left}

#mainbody {width:640pxmargin:5pxborder:1px solid #222padding:1px}

#mainphoto {cursor:pointerdisplay:block}

#goleft {float:leftclear:leftmargin:6px 5px 0 3px}

#goright {float:rightclear:rightmargin:6px 3px 0 5px}

#photos {width:610pxheight:54pxline-height:54pxborder:1px solid #222margin:10px 0overflow:hidden}

#showArea img {display:blockfloat:leftmargin:1px 0cursor:pointerborder:1px solid #222}.txt_1 {font:bold 24px Verdana, Tahomacolor:#fff}

[JS部分]

<script language="javascript" type="text/javascript">

var browse = window.navigator.appName.toLowerCase()

var MyMar

var speed = 1//速度，越大越慢

var spec = 1//每次滚动的间距, 越大滚动越快

var minOpa = 90//滤镜最小值

var maxOpa = 100//滤镜最大值

var spa = 2//缩略图区域补充数值

var w = 0

spec = (browse.indexOf("microsoft") >-1) ? spec : ((browse.indexOf("opera") >-1) ? spec*10 : spec*20)

function $(e) {return document.getElementById(e)}

function goleft() {$('photos').scrollLeft -= spec}

function goright() {$('photos').scrollLeft += spec}

function setOpacity(e, n) {

if (browse.indexOf("microsoft") >-1) e.style.filter = 'alpha(opacity=' + n + ')'

else e.style.opacity = n/100

}

$('goleft').style.cursor = 'pointer'

$('goright').style.cursor = 'pointer'

$('mainphoto').onmouseover = function() {setOpacity(this, maxOpa)}

$('mainphoto').onmouseout = function() {setOpacity(this, minOpa)}

$('mainphoto').onclick = function() {location = this.getAttribute('name')}

$('goleft').onmouseover = function() {this.src = 'images/goleft2.gif'MyMar=setInterval(goleft, speed)}

$('goleft').onmouseout = function() {this.src = 'images/goleft.gif'clearInterval(MyMar)}

$('goright').onmouseover = function() {this.src = 'images/goright2.gif'MyMar=setInterval(goright,speed)}

$('goright').onmouseout = function() {this.src = 'images/goright.gif'clearInterval(MyMar)}

window.onload = function() {

setOpacity($('mainphoto'), minOpa)

var rHtml = ''

var p = $('showArea').getElementsByTagName('img')

for (var i=0i<p.lengthi++) {

w += parseInt(p[i].getAttribute('width')) + spa

setOpacity(p[i], minOpa)

p[i].onclick = function() {location = this.getAttribute('name')}

p[i].onmouseover = function() {

setOpacity(this, maxOpa)

$('mainphoto').src = this.getAttribute('rel')

$('mainphoto').setAttribute('name', this.getAttribute('name'))

setOpacity($('mainphoto'), maxOpa)

}

p[i].onmouseout = function() {

setOpacity(this, minOpa)

setOpacity($('mainphoto'), minOpa)

}

rHtml += '<img src="' + p[i].getAttribute('rel') + '" width="0" height="0" alt="" />'

}

$('showArea').style.width = parseInt(w) + 'px'

var rLoad = document.createElement("div")

$('photos').appendChild(rLoad)

rLoad.style.width = "1px"

rLoad.style.height = "1px"

rLoad.style.overflow = "hidden"

rLoad.innerHTML = rHtml

}

</script>