效果图大致如下:
代码如下:
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Document</title> | |
<style type="text/css"> | |
*{ | |
margin: 0; | |
padding: 0; | |
} | |
#box{ | |
width: 592px; | |
height: 400px; | |
margin: 30px auto; | |
border: 5px #eee solid; | |
position: relative; | |
overflow: hidden; | |
} | |
img{ | |
width: 600px; | |
height: 400px; | |
border: none; | |
margin: 0; | |
padding: 0; | |
margin-left: -8px; | |
} | |
#img{ | |
width: 3600px; | |
position: absolute; | |
border: none; | |
left: 0; | |
} | |
h1{ | |
font-size: 22px; | |
line-height:25px; | |
margin-top: 10px; | |
margin-left: 5px; | |
} | |
p{ | |
font-size: 13px; | |
line-height: 20px; | |
margin: 8px; | |
} | |
#title{ | |
position: absolute; | |
top: 400px; | |
left: 0; | |
font-size: 12px; | |
width: 599px; | |
height: 180px; | |
margin-left: 0px; | |
} | |
#title div{ | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 600px; | |
height: 180px; | |
background: #000; | |
opacity: 0.5; | |
color: #fff; | |
} | |
</style> | |
<script type="text/javascript"> | |
function getStyle(obj,attr){ | |
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; | |
} | |
function run(obj,attr,step,frequency,target,endFn){ | |
clearInterval(obj.timer); | |
step=parseInt(getStyle(obj,attr))<target?step:-step; | |
obj.timer=setInterval(function(){ | |
var displace=parseInt(getStyle(obj,attr))+step;//位移 | |
if(step>0 && displace>target||step<0 && displace<target){ | |
displace=target; | |
} | |
obj.style[attr]=displace+'px'; | |
if(displace==target){ | |
clearInterval(obj.timer); | |
endFn && endFn(); | |
} | |
},frequency); | |
} | |
window.onload=function(){ | |
var oImg=document.getElementById('img'); | |
aImg=oImg.getElementsByTagName('img'); | |
num=0; | |
var timer=null; | |
var oTitle=document.getElementById('title'); | |
var aDiv=oTitle.getElementsByTagName('div'); | |
//文字部分向上浮动 | |
run(aDiv[0],'top',20,50,-100,function(){ | |
setTimeout(function(){ | |
run(aDiv[num],'top',20,50,0); | |
},1500) | |
}) | |
timer=setInterval(function(){ | |
var target=-600*(num+1); | |
//图片移动 | |
run(oImg,'left',20,20,target,function(){ | |
run(aDiv[num],'top',20,50,-100,function(){ | |
setTimeout(function(){ | |
run(aDiv[num],'top',20,50,0); | |
if(num==aImg.length-1){ | |
oImg.style.left=0; | |
num=0; | |
} | |
},1500) | |
}) | |
}) | |
num++; | |
},3000) | |
}; | |
</script> | |
</head> | |
<body> | |
<div id="box"> | |
<div id="img"> | |
<img src="img/i1.jpg" alt=""> | |
<img src="img/i2.jpg" alt=""> | |
<img src="img/4.jpg" alt=""> | |
<img src="img/6.jpg" alt=""> | |
<img src="img/9.jpg" alt=""> | |
<img src="img/3.jpg" alt=""> | |
</div> | |
<div id="title"> | |
<div> | |
<h1>离婚律师:第1集</h1> | |
<p>1:擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东(吴秀波 饰)算阴沟里翻船了,老婆公然给他戴了绿帽子,更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p> | |
</div> | |
<div> | |
<h1>离婚律师:第2集</h1> | |
<p>2:擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东(吴秀波 饰)算阴沟里翻船了,老婆公然给他戴了绿帽子,更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p> | |
</div> | |
<div> | |
<h1>离婚律师:第3集</h1> | |
<p>3:擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东(吴秀波 饰)算阴沟里翻船了,老婆公然给他戴了绿帽子,更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p> | |
</div> | |
<div> | |
<h1>离婚律师:第4集</h1> | |
<p>4:擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东(吴秀波 饰)算阴沟里翻船了,老婆公然给他戴了绿帽子,更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p> | |
</div> | |
<div> | |
<h1>离婚律师:第5集</h1> | |
<p>5:擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东(吴秀波 饰)算阴沟里翻船了,老婆公然给他戴了绿帽子,更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p> | |
</div> | |
<div> | |
<h1>离婚律师:第6集</h1> | |
<p>6:擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东(吴秀波 饰)算阴沟里翻船了,老婆公然给他戴了绿帽子,更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |