HTML+CSS+JavaScript网络相册【有缩略图】
来源:互联网 发布:淘宝联盟怎么查订单号 编辑:程序博客网 时间:2024/06/06 07:41
今晚整理了一下,把班级相册弄了一下,加了个缩略图,版本有点丑,下个版本再更新吧。
1
<!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">
<!-- 这里没用js 暂时不写 下个版本再改进 -->
<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="again()" 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/ 不过图片上传后好像有点延迟,大家别介意。
- HTML+CSS+JavaScript网络相册【有缩略图】
- HTML+CSS+JavaScript网络相册【有缩略图】
- HTML+CSS+JavaScript网络相册【有缩略图】
- HTML+CSS+JavaScript网络相册【有缩略图】
- HTML+CSS+JavaScript网络相册【有缩略图】
- HTML+CSS+JavaScript网络相册【有缩略图】
- HTML+CSS+JavaScript网络相册【有缩略图】
- HTML+CSS+JavaScript网络相册【有缩略图】
- 网络相册
- HTML DOM & JavaScript & CSS
- HTML CSS JavaScript
- html javascript css 大小写
- PHP,javascript,html,css
- HTML、JavaScript、Dom、css
- Html & CSS & JavaScript
- HTML+CSS+JavaScript 资料
- html、css、javaScript练习题
- HTML+CSS+JavaScript小结
- ansbile 创建 主机之间的信任关系
- 求n个数最小公倍数
- Spring <context:component-scan base-package=""/> 与 <context:annotation-config/>的区别
- ScrollView嵌套RecyclerView滑动冲突,禁止RecycleView滑动
- jqeury验证表单
- HTML+CSS+JavaScript网络相册【有缩略图】
- [ACM_HDU_1297递归推导]Children’s Queue
- linux驱动学习(字符型设备驱动)
- ios App启动加载广告页面思路
- viewPager无限轮播效果(留待以后填坑)
- 数据库和数据仓库
- 团体程序设计天梯赛-练习集 L2-005. 集合相似度 解题报告
- Java中各种修饰符与访问修饰符的说明
- 【机器学习实战-python3】线性回归