好久没更新了，加一个jqery图片展示效果
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<SCRIPT src="jquery.min.js" type=text/javascript></SCRIPT>
<style type="text/css">
#photoShow{
border: solid 1px #C5E88E;
overflow: hidden; /**//*图片超出DIV的部分不显示*/
width: 700px;
height: 256px;
background: #C5E88E;
position: relative;
}
.photo{
position: absolute;
top: 0px;
width: 632px;
height: 256px;
}
.photo img{
width: 632px;
height: 256px;
}
.photo span{
padding: 5px 0px 0px 5px;
width: 632px;
height: 110px;
position: absolute;
left: 0px;
bottom: -32px; /**//*介绍内容开始的时候不显示*/
background: black;
filter: alpha(opacity=50); /**//*IE透明*/
opacity: 0.5; /**//*FF透明*/
color: #FFFFFF;
}
.jqtitle{height:200px; left:0; width:20px; overflow:hidden; position:absolute; top:0px; background-color:#9933CC; z-index:6;}
.jqcontent{left:0; overflow:hidden; position:absolute; top:-50px; background-color:#9933CC; z-index:6;}
</style>
</head>
<body>
<div id="photoShow">
<div class="photo one">
<img src="p1.jpg" />
<div class="jqtitle">1操盘风向标</div>
<div class="jqcontent">
1操盘风向标
</div>
</div>
<div class="photo">
<img src="p2.jpg" />
<div class="jqtitle">破解庄家</div>
<div class="jqcontent">
<a href="#">操盘风向标</a>
</div>
</div>
<div class="photo">
<img src="p3.jpg" />
<div class="jqtitle">操盘风向标</div>
<div class="jqcontent">
<a href="#">操盘风向标</a>
</div>
</div>
<div class="photo">
<img src="p4.jpg" />
<div class="jqtitle">操盘风向标</div>
<div class="jqcontent">
<a href="#">操盘风向标</a>
</div>
</div>
<div class="photo">
<img src="p5.jpg" />
<div class="jqtitle">操盘风向标</div>
<div class="jqcontent">
<a href="#">操盘风向标</a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var imgDivs = $("#photoShow>div");
var imgNums = imgDivs.length; //图片数量
var divWidth = parseInt($("#photoShow").css("width")); //显示宽度
var imgWidth = parseInt($(".photo>img").css("width")); //图片宽度
var minWidth = 20; //显示其中一张图片时其他图片的显示宽度
var spanHeight = parseInt($("#photoShow>.photo:first>.jqcontent").css("height")); //获取图片介绍信息的高度
imgDivs.each(function(i){
$(imgDivs[i]).css({"z-index": i, "left": i*(divWidth/imgNums)});
$(imgDivs[i]).hover(function(){
//$(this).find("img").css("opacity","1");
$(this).find("span").stop().animate({bottom: 0}, "slow");
imgDivs.each(function(j){
if(j<=i){
$(imgDivs[j]).stop().animate({left: j*minWidth}, "slow");
}else{
$(imgDivs[j]).stop().animate({left: (j-1)*minWidth+imgWidth}, "slow");
}
});
},function(){
imgDivs.each(function(k){
//$(this).find("img").css("opacity","0.7");
});
});
});
$(imgDivs[0]).css({"z-index": 0, "left": 0});
$(imgDivs[1]).css({"z-index": 1, "left": 622});
$(imgDivs[2]).css({"z-index": 2, "left": 642});
$(imgDivs[3]).css({"z-index": 3, "left": 662});
$(imgDivs[4]).css({"z-index": 4, "left": 682});
});
</script>
</body>
</html>
未完
