<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ppt</title>
<style type="text/css">
#body{
background-color: black;
}
img{
cursor:pointer;
}
#img1{
height: 500px;
position: absolute;
left: 0px;
top: 0;
z-index: 99;
opacity: 1;
filter:alpha(opacity=100)
}
#img2{
height: 400px;
position: absolute;
top: 0;
left: 260px;
z-index: 98;
opacity: 0.7;
filter:alpha(opacity=70)
}
#img3{
height: 400px;
position: absolute;
top: 0;
left: -200px;
z-index: 98;
opacity: 0.7;
filter:alpha(opacity=70)
}
.ppt_tu{
height: 500px;
width: 333px;
margin:0 auto;
background-color: red;
position: relative;
}
#img_left{
height: 100px;
position: absolute;
top: 200px;
left: -367px;
}
#img_right{
height: 100px;
position: absolute;
top: 200px;
left: 600px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var img_left=document.getElementById('img_left')
var img_right=document.getElementById('img_right')
var img1=document.getElementById('img1')
var img2=document.getElementById('img2')
var img3=document.getElementById('img3')
var alpha=100
var time=null
var ce=document.getElementById('ce')
img_left.onclick=function(){
ppt_t(img1)
//ppt_t(img2)
//ppt_t(img3) 就是在这里，每一个函数单独运行都好好的，但是再多一个，就会错误
}
function ppt_t(obj){
if(obj.offsetLeft==0){
ppt(obj,-10,-10,-200,400,-5)
}
else if(obj.offsetLeft==-200){
obj.style.left=260+"px"
}
else if(obj.offsetLeft==260){
ppt(obj,-13,10,0,400,+5)
}
//ppt(img2,-13,0,400,+5)
}
function ppt(obj,speen,opa,zuo,gao,gao2){
time=setInterval(function(){
if(obj.offsetLeft>(zuo)&&obj.offsetHeight>=gao){
obj.style.left=obj.offsetLeft+speen+"px"
obj.style.height=obj.offsetHeight+(gao2)+"px"
alpha = alpha+(opa/10);
obj.style.filter = 'alpha(opacity='+alpha+')';
obj.style.opacity = alpha/100;
}
else{
clearInterval(time)
}
},30)
}
}
</script>
</head>
<body id="body">
<div class="ppt">
<div class="ppt_tu">
<div class="ppt_tu_1">
<img src="img/1.jpg"/ id="img1">
</div>
<div class="ppt_tu_2">
<img src="img/2.jpg"/ id="img2">
</div>
<div class="ppt_tu_2">
<img src="img/3.jpg"/ id="img3">
</div>
<div class="butter">
<img src="img/left.png"/ id="img_left">
<img src="img/right.png" id="img_right"/>
</div>
</div>
<input type="button" name="ce" id="ce" value="测试" />
<div class="yuan">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消