效果图大致如下：
代码如下：
| <!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> |