1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Css3 Images Fade & Slider</title> 6 <style type="text/css"> 7 body{background:#f8f8f8; margin:0;} 8 img{border:0; vertical-align:middle;} 9 .focus{width:800px; margin:0 auto; position:relative; overflow:hidden;} 10 .images{height:350px; overflow:hidden; position:relative;} 11 .images .item{position:absolute; top:0; left:0; height:350px; overflow:hidden; opacity:0; transition:opacity 0.8s linear; -webkit-transition:opacity 0.8s linear;} 12 .images .item img{width:800px;} 13 .images .active{opacity:1;} 14 .control{position:absolute; bottom:10px; width:100%; text-align:center;} 15 .control span{display:inline-block; cursor:pointer; background:#5fbab1; color:#fff; width:25px; height:25px; text-align:center; line-height:25px; border-radius:25px; margin:0 8px;} 16 .control span.active{background:#e77918;} 17 .title{position:absolute; left:0; top:30%; width:100%;} 18 .title p{position:absolute; left:0; top:0; background:#000; background:rgba(0,0,0,0.8); color:#fff; padding:20px 0; margin:0; text-indent:10px; width:300px; opacity:0; transform:translateX(-300px); -webkit-transform:translateX(-300px); transition:all 0.8s ease-out; -webkit-transition:all 0.8s ease-out;} 19 .title p.active{opacity:1; transform:translateX(0); -webkit-transform:translateX(0);} 20 </style> 21 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 22 <script> 23 $(function(){ 24 $('.images .item:first, .control span:first, .title p:first').addClass('active'); 25 var index = 0, 26 len = $('.images .item').length; 27 autoPlay = function(){ 28 $('.images .item').eq(index++).addClass('active').siblings('.item').removeClass('active'); 29 $('.title p').eq(index-1).addClass('active').siblings('p').removeClass('active'); 30 $('.control span').eq(index-1).addClass('active').siblings('span').removeClass('active'); 31 if(index == len){index = 0;} 32 }, 33 loop = setInterval(autoPlay,3000); 34 $('.control span').hover(function(){ 35 index = $(this).index(); 36 autoPlay(); 37 clearInterval(loop); 38 },function(){ 39 loop = setInterval(autoPlay,3000); 40 }) 41 }) 42 </script> 43 </head> 44 45 <body> 46 <div class="focus"> 47 <div class="images"> 48 <div class="item"><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1041/images/banner_01.jpg" /></div> 49 <div class="item"><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1041/images/banner_02.jpg" /></div> 50 <div class="item"><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1041/images/banner_03.jpg" /></div> 51 </div> 52 <div class="title"> 53 <p>不变的安全才是最可靠的安全。</p> 54 <p>清新的绿色源自身边的绿色。</p> 55 <p>服务于生活的科技才是最高端的科技。</p> 56 </div> 57 <div class="control"> 58 <span>1</span> 59 <span>2</span> 60 <span>3</span> 61 </div> 62 </div> 63 </body> 64 </html>