<!-- 注意的地方
1.position 的 relative 和 absolute 联合使用的作用和效果 : absolute 绝对定位(1.默认从对窗口的左上角开始,2.也可以对某一个 div 进行绝对定位:这时这个 div 必须设置 position:relative 属性)
2.jquery 动画时间差的判断,
3.JQuery 遍历方法 each()的用法和eq() 的用法
4.JQuery 动画主要是对各个标签的 属性 的改变来显示出动画效果
-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<script src="jquery.js"></script>
<style>
*{padding: 0;margin: 0}
.content{width: 800px;margin: 100px auto;background-color: grey;height: 600px;position: relative}
li{list-style: none;float: left;}
.no1{width: 250px;height: 400px;position: absolute;top: 100px;left: 275px;z-index: 6;opacity: 1}
.no2{width: 200px;height: 300px;position: absolute;top: 150px;left: 500px;z-index: 5;opacity: 0.8}
.no3{width: 150px;height: 250px;position: absolute;top:175px;left: 600px;z-index: 0;opacity: 0.5}
.no4{width: 150px;height: 250px;position: absolute;top: 175px;left: 325px;z-index: 0;opacity: 0.5}
.no5{width: 150px;height: 250px;position: absolute;top:175px;left: 50px;z-index: 2;opacity: 0.5}
.no6{width: 200px;height: 300px;position: absolute;top: 150px;left: 100px;z-index: 4;;opacity: 0.8}
strong{position: relative;top:13px}
.left-btn{width: 50px;height: 50px;background-color: rgba(9, 128, 15, 0.46);position: absolute ;top: 275px;text-align: center;font-size: 20px;color: #ffffff;cursor: pointer}
.right-btn{width: 50px;height: 50px;background-color: rgba(9, 128, 15, 0.46);position: absolute ;top: 275px;left:750px;text-align: center;font-size: 20px;color: #ffffff;cursor: pointer}
</style>
<body>
<script>
jq = jQuery.noConflict();
jq(document).ready(function(){
var time = new Date();
jq(".left-btn").click(function(){
var pressTime = new Date();
if(pressTime-time > 500){
time = pressTime;
move(0);
}
});
jq(".right-btn").click(function(){
var pressTime = new Date();
if(pressTime-time>500){
time = pressTime;
move(1);
}
});
});
//diriction - 方向 ----0-向左移动---1--向右移动---
function move(diriction){
//总共图片的数量
var conut = jq(".content ul li img").length;
var arrW=[];var arrH=[];var arrT=[];var arrL =[];var arrZ=[];var arrO= [];
jq(".content ul li img").each(function(i){
arrZ[i] = jq(this).css("z-index");
arrW[i] = jq(this).css("width");
arrH[i] = jq(this).css("height");
arrT[i] = jq(this).css("top");
arrL[i] = jq(this).css("left");
arrO[i] = jq(this).css("opacity");
});
//向右
if(diriction==1){
for(var i =0;i<conut;i++){
var position =i+1;
if(position==conut){
position=0;
}
jq(".content ul li img").eq(i).animate({
"z-index":arrZ[position],
"width":arrW[position],
"height":arrH[position],
"top":arrT[position],
"left":arrL[position],
"opacity":arrO[position]
},500)
}
//向左
}else if(diriction == 0){
for(var j =0;j<conut;j++){
var position2;
if(j==0){
position2 = 5;
}else{
position2 = j-1;
}
jq(".content ul li img").eq(j).animate({
"z-index":arrZ[position2],
"width":arrW[position2],
"height":arrH[position2],
"top":arrT[position2],
"left":arrL[position2],
"opacity":arrO[position2]
},500)
}
}
}
</script>
<div class="content">
<ul>
<li >
<img class="no1" src="imges/1.jpg" alt="图"/>
</li>
<li>
<img class="no2" src="imges/2.jpg" alt=""/>
</li>
<li>
<img class="no3" src="imges/3.jpg" alt=""/>
</li>
<li>
<img class="no4" src="imges/4.jpg" alt=""/>
</li>
<li>
<img class="no5" src="imges/5.jpg" alt=""/>
</li>
<li>
<img class="no6" src="imges/6.jpg" alt=""/>
</li>
</ul>
<div class="right-btn">
<strong> > </strong>
</div>
<div class="left-btn">
<strong> < </strong>
</div>
</div>
</body>
</html>
