零基础建站培训教程介绍

当前位置:

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

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

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特效代码在这里:https://www.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滚动到顶部固定不滚动特效

发表评论

电子邮件地址不会被公开。 必填项已用*标注

学做网站论坛零基础学建网站课程