今晚整理了一下，把班级相册弄了一下，加了个缩略图，版本有点丑，下个版本再更新吧。
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.οnlοad=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" οnmοuseοver="stop()" οnmοuseοut="again()" /></li> </ul> </div>
<div class="thum"> <ul class="tbs"> <!-- 这里没用js 暂时不写 下个版本再改进 --> <li class=""><img src="./thumbs/1.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/2.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/3.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/4.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/5.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/6.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/7.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/8.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/9.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/10.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/11.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/12.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/13.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/14.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/15.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/16.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/17.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/18.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/19.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/20.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/21.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/22.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> <li class="thumbs_none"><img src="./thumbs/23.JPG" οnmοuseοver="stop()" οnmοuseοut="again()" class="" /></li> </ul> </div> </body> </html>
效果图如下:
在线演示地址：http://bbqwifi.info/php/show/ 不过图片上传后好像有点延迟，大家别介意。
