您的位置：首页 > 理论基础 > 计算机网络

HTML+CSS+JavaScript网络相册【有缩略图】

2017-03-19 17:49 288 查看

今晚整理了一下，把班级相册弄了一下，加了个缩略图，版本有点丑，下个版本再更新吧。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>大肥</title>

<style type="text/css">

div{margin:0px auto;}

.box{width: 800px;height: 530px;overflow: hidden;border-radius: 10px;}

.thum{height: 200px;width: 1500px;margin-top: 50px;}

ul{list-style: none;margin:0px;padding: 0px;}

li{float: left;}

.thumbs_none{opacity:0.6;filter:alpha(opacity=40); }

</style>

<script type="text/javascript">

//定义一个变量控制全局定时器

var times;

window.onload=function(){

//用变量控制定时器

times = setInterval('lb()',1000);

}

//图片轮播方法

var i=2;

function lb(){

//获取src属性更改图片路径

var info = document.getElementById("img");

var thu=document.getElementById("thumbs");

var li_list=document.getElementsByTagName("li");

for (var j = 1; j<li_list.length;j++) {

//给所有缩略图添加透明样式

li_list[j].className="thumbs_none";

//匹配缩略图同步去除透明度

if(j==i){

li_list[j].className="";

}

}

//移除透明度样式

thu.className="";

info.src="./"+i+".JPG";

//运行后i+1 到达最大数时候回归清零

i++;

if(i>23){

i=1;

}

}

//鼠标经过停止

function stop(){

//清理定时器

clearInterval(times);

}

//鼠标离开继续轮播

function again(){

//清除定时器的时候要把这个也要清除否则两个同时运行会重叠

times = setInterval('lb()',1000);

}

</script>

</head>

<body>

<div class="box">

<ul><li><img src="./1.JPG" onmouseover="stop()" onmouseout="again()" /></li> </ul> </div>

<div class="thum">

<ul class="tbs">



<li class=""><img src="./thumbs/1.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/2.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/3.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/4.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/5.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/6.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/7.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/8.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/9.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/10.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/11.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/12.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/13.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/14.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/15.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/16.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/17.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/18.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/19.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/20.JPG" onmouseover="stop()" onmouseout="aga
4000
in()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/21.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/22.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

<li class="thumbs_none"><img src="./thumbs/23.JPG" onmouseover="stop()" onmouseout="again()" class="" /></li>

</ul>

</div>

</body>

</html>

效果图如下:

在线演示地址：http://bbqwifi.info/php/show/ 不过图片上传后好像有点延迟，大家别介意。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航