仿照别人的写的，可以改成自己的目录
<!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=utf-8" />
<title>无标题文档</title>
<style>
#test select{
width:100px;
margin-left:20px;
}
</style>
<script src="jquery-1[1].2.6.js" type="text/javascript"></script>
<script src="yuanliao.js" type="text/javascript"></script>
<script src="CreateYuanLiao.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var imgdis = 0;
var imgDivs = $("#photoShow>div");
var imgNums = imgDivs.length; //图片数量
var divWidth = parseInt($("#photoShow").css("width")); //显示宽度
var imgWidth = parseInt($(".photo>img").css("width")); //图片宽度
var minWidth = (divWidth - imgWidth)/(imgNums-1); //显示其中一张图片时其他图片的显示宽度
var spanHeight = parseInt($("#photoShow>.photo:first>span").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");
}
imgdis = i;
});
},function(){
imgDivs.each(function(k){
//$(this).find("img").css("opacity","0.7");
$(this).find("span").stop().animate({bottom: -spanHeight}, "slow");
//$(imgDivs[k]).stop().animate({left: k*(divWidth/imgNums)}, "slow");
});
});
});
$.extend({
show:function(){
//$(this).find("img").css("opacity","1");
$(imgDivs[imgdis]).find("span").stop().animate({bottom: 0}, "slow");
imgDivs.each(function(j){
if(j<=imgdis){
$(imgDivs[j]).stop().animate({left: j*minWidth}, "slow");
}else{
$(imgDivs[j]).stop().animate({left: (j-1)*minWidth+imgWidth}, "slow");
}
});
imgDivs.each(function(k){
//$(this).find("img").css("opacity","0.7");
$(imgDivs).find("span").stop().animate({bottom: -spanHeight}, "slow");
$(imgDivs[imgdis]).find("span").stop().animate({bottom: '0px'}, "slow");
//$(imgDivs[k]).stop().animate({left: k*(divWidth/imgNums)}, "slow");
});
if(imgdis+2>imgNums)
{
imgdis =0;
}else{
imgdis++;
}
}
});
setInterval("$.show()",3000);
});
</script>
<!-- <script type="text/javascript">
/*
//调用插件
$(function(){
var ss = $("#test").ProvinceCity();
//$("#test").insertAfter(ss);
$("#btn").click(function(){
var $sel1 = ss.find("select").eq(0).val();
var $sel2 = ss.find("select").eq(1).val();
alert($sel2);
});
});
*/
$(function(){
var ss = $("#test").MaterialInfo22(GT22,'002001');
});
</script>!-->
<style type="text/css">
#photoShow{
border: solid 1px #c5e88e;
overflow: hidden; /*图片超出DIV的部分不显示*/
width: 580px;
height: 169px;
background: #c5e88e;
position: absolute;
}
.photo{
position: absolute;
top: 0px;
width: 490px;
height: 169px;
}
.photo img{
width: 490px;
height: 169px;
}
.photo span{
padding: 5px 0px 0px 5px;
width: 490px;
height: 30px;
position: absolute;
left: 0px;
bottom: -32px; /*介绍内容开始的时候不显示*/
background: black;
filter: alpha(opacity=50); /*IE透明*/
opacity: 0.5; /*FF透明*/
color: #ffffff;
}
</style>
</head>
<body>
<div id="photoShow"> <div class="photo" style="z-index: 0; left: 0px;">
<img src="D:/Backup/我的文档/My Pictures/large_7534o66.jpg" alt=""/>
<span style="bottom: -30px;">夜幕下的畅想</span>
</div>
<div class="photo" style="z-index: 1; left: 116px;">
<img src="D:/Backup/我的文档/My Pictures/p_large_9Jm4_7caf000188302d12.jpg" alt=""/>
<span style="bottom: -30px;">风光无限</span>
</div>
<div class="photo" style="z-index: 2; left: 232px;">
<img src="D:/Backup/我的文档/My Pictures/p_large_jRNP_42e200009de82d0b.jpg" alt=""/>
<span style="bottom: -30px;">陈姣姣喜欢的美景，花儿送给你</span>
</div>
<div class="photo" style="z-index: 3; left: 348px;">
<img src="D:/Backup/我的文档/My Pictures/p_large_mHwU_13100002fa6b2d10.jpg" alt=""/>
<span style="bottom: -30px;">美丽，喜欢</span>
</div>
<div class="photo" style="z-index: 4; left: 464px;">
<img src="D:/Backup/我的文档/My Pictures/p_large_zA1A_13120004ece22d10.jpg" alt=""/>
<span style="bottom: -30px;">送给自己的美景</span>
</div>
</div>
</body>
</html>
引用jquery-1[1].2.6.js
扫一扫
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
