如何制作网站的图片相册特效

我们在制作一些图片网站，由于图片比较多的情况，可以使用先让用户看到一些图片的缩略图，然后通过光标移动到小图后，显示大图的效果，就叫做图片相册特效。

我们在做网站时，如何让我们自己的网站有图片相册的功能呢，我们在学做网站时，也可以动手去做一下。

制作网站的图片相册特效步骤：

打开DW软件，新建一个HTML网页，然后将这个空白网页保存到桌面上，取名为1.html；
在电脑桌面上新建一个image文件夹，到“百度图片”下载四张风景图片，保存到image文件夹，并且命名为1.jpg,2.jpg,3.jpg,4.jpg
打开1.html，在<body>标签里插入以下的HTML代码：（相关教程：html视频教程）
<div>
<p id="img1"><img src="image/1.jpg" width="600px" height="400px"></p>
<p id="img2"><img src="image/2.jpg" width="600px" height="400px"></p>
<p id="img3"><img src="image/3.jpg" width="600px" height="400px"></p>
<p id="img4"><img src="image/4.jpg" width="600px" height="400px"></p></div>

<div class="libiao">
<ul>

<li onmouseover="t(1)"><img src="image/1.jpg" width="80px" height="40px"></p></li>
<li onmouseover="t(2)"><img src="image/2.jpg" width="80px" height="40px"></p></li>
<li onmouseover="t(3)"><img src="image/3.jpg" width="80px" height="40px"></p></li>
<li onmouseover="t(4)"><img src="image/4.jpg" width="80px" height="40px"></p></li>
</ul>
</div>
在网页的</head>上面插入以下style样式
<style>
.libiao li{float:left;margin:5px;list-style:none}
#img2,#img3,#img4{display:none}</style>
这时，我们就完成了整个HTML代码的书写，我们打开网页会看到几张图片和几个小缩略图，但还没有我们做网站时需要的图片切换的效果，所以还需要在</head>标签上面加上以下的js特效代码。（更多js特效代码在这里：https://www.xuewangzhan.com/jz/jquery/）
<script>
function t(pid){
for(var i=1;i<=4;i++){
document.getElementById('img'+i).style.display= pid==i ? 'block' : 'none';
}
}
</script>
在网站上加入这段JS代码的作用就是实现当光标移到缩略图时，会显示相应的大图片。这样我们就做好了网站图片相册的效果，学习怎么做网站的新手们赶快动手做一做吧……