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

栏目：JS建站代码，jQuery网站特效代码 浏览：24,774

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

1

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

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

  1. 打开DW软件，新建一个HTML网页，然后将这个空白网页保存到桌面上，取名为1.html；
    1
  2. 在电脑桌面上新建一个image文件夹，到“百度图片”下载四张风景图片，保存到image文件夹，并且命名为1.jpg,2.jpg,3.jpg,4.jpg
    2
  3. 打开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>
  4. 在网页的</head>上面插入以下style样式
    <style>
    .libiao li{float:left;margin:5px;list-style:none}
    #img2,#img3,#img4{display:none}</style>
  5. 这时，我们就完成了整个HTML代码的书写，我们打开网页会看到几张图片和几个小缩略图，但还没有我们做网站时需要的图片切换的效果，所以还需要在</head>标签上面加上以下的js特效代码。（更多js特效代码在这里：http://ke.xuewangzhan.net/jz/jquery/）
    <script>
    function t(pid){
    for(var i=1;i<=4;i++){
    document.getElementById('img'+i).style.display= pid==i ? 'block' : 'none';
    }
    }
    </script>
  6. 在网站上加入这段JS代码的作用就是实现当光标移到缩略图时，会显示相应的大图片。这样我们就做好了网站图片相册的效果，学习怎么做网站的新手们赶快动手做一做吧……

推荐阅读：制作div滚动到顶部固定不滚动特效


关闭 维课网微信