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>
