根据我之前的图片预览，改进成相册浏览。下边有一排小的图片，点击下边的小图，上边的大图会显示所点的小图，同时下边被点击的小图会调整到中间，还不会做缓慢移动动画 ，功能比较简单。
在写这个的时候，发现img中的alt属性不能实现将鼠标停在图片上显示文字提示，查了才知道要用title，alt是图片加载失败显示提示的，title才能显示图 片时有文字提示。
下面是我的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>网页相册浏览效果</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style type="text/css">
body{font-size:12px; background-color:Black;}
div{padding-left:12%;padding-top:4.5%;}
.clsImg{border:1px solid #ccc ;height:11%; width:10%;margin-left:1%;}
.clsImgShow{ height:50%; width:40%; margin-left:30%; margin-top:7%;}
</style>
<script type="text/javascript">
$(document).ready(function () {
var imgNu = $("div img").length;
$("img").css({ "cursor": "pointer" });
$("div img").click(function (e) {
$("#imgShow").attr({ src: this.src });
var nu = parseInt(this.id);
var step = (parseInt(imgNu / 2) + 1 + imgNu - nu) % imgNu;
var i;
var arr = new Array();
var tit = new Array();
for (i = 1; i <= imgNu; i++) {
arr[i] = $("#0" + i).attr("src");
tit[i] = $("#0" + i).attr("title");
}
for (i = 1; i <= imgNu; i++) {
var n = (i + step) % imgNu;
if (n == 0)
n = 7;
$("#0" + n).attr({ src: arr[i], title: tit[i] });
}
n =parseInt( imgNu / 2 )+ 1;
$("#imgShow").attr({ title: $("#0" + n).attr("title") });
})
})
</script>
</head>
<body>
<img id="imgShow" class="clsImgShow" src="images/img4.jpg" title="" />
<div>
<img id="01" class="clsImg" src="images/img1.jpg" title="图片1" />
<img id="02" class="clsImg" src="images/img2.jpg" title="图片2" />
<img id="03" class="clsImg" src="images/img3.jpg" title="图片3" />
<img id="04" class="clsImg" src="images/img4.jpg" title="图片4" />
<img id="05" class="clsImg" src="images/img5.jpg" title="图片5" />
<img id="06" class="clsImg" src="images/img6.jpg" title="图片6" />
<img id="07" class="clsImg" src="images/img7.jpg" title="图片7" />
</div>
</body>
</html>
效果
初始画面：
点击图片2之后：
微信扫一扫，订阅我的博客动态^_^
